Funkcija rotateY
Funkcija rotateY iestata rotāciju ap
Y asi trīsdimensiju telpā. Tiek izmantota
kopā ar īpašību transform.
Īpašības vērtība ir leņķis jebkuros leņķa
mērvienībos. Pozitīva vērtība pagriež
elementu pret mums, negatīva - prom no mums. Rotācija tiek veikta
ap punktu, ko nosaka īpašība transform-origin.
Sintakse
selektors {
transform: rotateY(leņķis);
}
Piemērs
Šajā piemērā bloks, novietojot peles kursoru virs tā, pagriezīsies
par 180 grādiem ap Y 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: rotateY(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: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
