Funcția rotateX
Funcția rotateX definește o rotație în jurul
axei X î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: rotateX(unghi);
}
Exemplu
În acest exemplu, blocul la hover se va roti
cu 180 de grade în jurul axei X. 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: rotateX(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: rotateX(180deg);
}
:
Exemplu
Să setăm un unghi negativ:
<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: rotateX(-180deg);
}
:
