Funkcia rotate
Funkcia rotate() nastavuje otočenie prvku
o zadaný uhol. Používa sa spoločne
s vlastnosťou transform.
Hodnotou vlastnosti je uhol v ľubovoľných jednotkách
pre uhly. Kladná hodnota otáča
v smere hodinových ručičiek, záporná - proti.
Otočenie sa vykonáva okolo bodu, ktorý je zadaný
vlastnosťou transform-origin.
Syntax
selektor {
transform: rotate(uhl);
}
Príklad
V tomto príklade je blok otočený o 30
stupňov v smere hodinových ručičiek:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Príklad
V tomto príklade je blok otočený o 30
stupňov proti smeru hodinových ručičiek:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Príklad
V tomto príklade sa blok pri prejdení myšou otočí
o 1 otáčku, pretože hodnota otočenia
je zadaná v 1turn (rovnakého efektu sa dosiahne,
ak sa zadá uhol otočenia v 360deg). Pre
plynulosť otočenia je pridaná vlastnosť
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);
}
:
