Funkcija rotateZ
Funkcija rotateZ nosaka rotāciju attiecībā pret
Z asi trīsdimensiju telpā. Tiek izmantota
kopā ar īpašību transform.
Īpašības vērtība ir leņķis jebkurās leņķa
mērvienībās. Pozitīva vērtība pagriež
pulksteņrādītāja virzienā, negatīva - pretēji.
Rotācija tiek veikta ap punktu, ko nosaka
īpašība transform-origin.
Sintakse
selektors {
transform: rotateZ(leņķis);
}
Piemērs
Šajā piemērā bloks, novietojot kursoru virs tā, pagriezīsies
par 180 grādiem ap Z asi. Lai nodrošinātu vienmērīgu
rotāciju, ir pievienota īpašība 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);
}
:
Piemērs
Mainīsim rotācijas asi, izmantojot īpašību
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);
}
:
