Funkcia rotateZ
Funkcia rotateZ nastavuje otočenie vzhľadom
na os Z v trojrozmernom priestore. 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 definovaný
vlastnosťou transform-origin.
Syntax
selektor {
transform: rotateZ(uhol);
}
Príklad
V tomto príklade sa blok pri prejdení myšou otočí
o 180 stupňov okolo osi Z. Pre plynulosť
otočenia bola 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: rotateZ(180deg);
}
:
Príklad
Zmeníme os rotácie pomocou vlastnosti
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: rotateZ(180deg);
}
:
