Funkcija rotate
Funkcija rotate() zadaje rotaciju elementa
za određeni ugao. Koristi se zajedno
sa svojstvom transform.
Vrednost svojstva je ugao u bilo kojoj jedinici
za uglove. Pozitivna vrednost rotira
u smeru kazaljke na satu, negativna - suprotno.
Rotacija se vrši oko tačke određene
svojstvom transform-origin.
Sintaksa
selektor {
transform: rotate(ugao);
}
Primer
U ovom primeru blok je rotiran za 30
stepeni u smeru kazaljke na satu:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Primer
U ovom primeru blok je rotiran za 30
stepeni suprotno od smera kazaljke na satu:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Primer
U ovom primeru blok će se pri prelasku mišem rotirati
za 1 pun krug, jer je vrednost rotacije
zadata u 1turn (isti efekat se može postići
ako se ugao rotacije zada kao 360deg). Za
glatku rotaciju dodato je svojstvo
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);
}
:
