Funkcja rotate
Funkcja rotate() ustawia obrót elementu
o zadany kąt. Używana jest wspólnie
z właściwością transform.
Wartością właściwości jest kąt w dowolnych jednostkach
kątów. Wartość dodatnia obraca
zgodnie z ruchem wskazówek zegara, ujemna - przeciwnie.
Obrót jest wykonywany wokół punktu zdefiniowanego przez
właściwość transform-origin.
Składnia
selektor {
transform: rotate(kąt);
}
Przykład
W tym przykładzie blok jest obrócony o 30
stopni zgodnie z ruchem wskazówek zegara:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Przykład
W tym przykładzie blok jest obrócony o 30
stopni przeciwnie do ruchu wskazówek zegara:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Przykład
W tym przykładzie blok po najechaniu obróci się
o 1 obrót, ponieważ wartość obrotu
jest podana w 1turn (ten sam efekt można osiągnąć,
jeśli ustawić kąt obrotu w 360deg). Dla
płynności obrotu dodano właściwość
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);
}
:
