Funkcija rotate
Funkcija rotate() iestata elementa pagriešanu
par noteiktu leņķi. Tiek lietota 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ņa rādītāja virzienā, negatīva - pretēji.
Pagriešana tiek veikta ap punktu, ko nosaka
īpašība transform-origin.
Sintakse
selektors {
transform: rotate(leņķis);
}
Piemērs
Šajā piemērā bloks ir pagriezts par 30
grādiem pulksteņa rādītāja virzienā:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Piemērs
Šajā piemērā bloks ir pagriezts par 30
grādiem pretēji pulksteņa rādītāja virzienam:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Piemērs
Šajā piemērā bliks, novietojot kursoru virs tā, pagriezīsies
par 1 apgriezienu, jo pagriešanas vērtība
ir iestatīta kā 1turn (tādu pašu efektu var iegūt,
iestatot pagriešanas leņķi kā 360deg). Lai
pagriešana būtu vienmērīga, 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: rotate(1turn);
}
:
