Funcția rotateZ
Funcția rotateZ definește o rotație în jurul
axei Z în spațiul tridimensional. Este utilizată
împreună cu proprietatea transform.
Valoarea proprietății este un unghi în orice unitate
de măsură pentru unghiuri. O valoare pozitivă rotește
în sensul acelor de ceasornic, una negativă - în sens invers.
Rotația se efectuează în jurul punctului definit de
proprietatea transform-origin.
Sintaxă
selector {
transform: rotateZ(unghi);
}
Exemplu
În acest exemplu, blocul se va roti la hover
cu 180 grade în jurul axei Z. Pentru o rotație
lină a fost adăugată proprietatea transition:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
Exemplu
Să schimbăm axa de rotație folosind proprietatea
transform-origin:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
