Funkcija rotateX
Funkcija rotateX nosaka rotāciju ap
X 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ž elementu pret mums, negatīva - prom no mums. Rotācija tiek veikta
ap punktu, ko nosaka īpašība transform-origin.
Sintakse
selektors {
transform: rotateX(leņķis);
}
Piemērs
Šajā piemērā, novietojot kursoru uz bloka, tas tiks pagriezts
par 180 grādiem ap X asi. Lai nodrošinātu vienmērīgu rotāciju,
tika 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: rotateX(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: rotateX(180deg);
}
:
Piemērs
Iestatīsim negatīvu leņķi:
<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);
}
:
