Funcția rotateY
Funcția rotateY definește o rotație în jurul
axei Y î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
elementul spre noi, iar una negativă - departe de noi. Rotația este efectuată
în jurul punctului specificat de proprietatea transform-origin.
Sintaxă
selector {
transform: rotateY(unghi);
}
Exemplu
În acest exemplu, blocul se va roti la hover
cu 180 grade în jurul axei Y. Pentru o tranziție lină
a rotației, 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: rotateY(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: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
