Funkcia rotateY
Funkcia rotateY definuje otočenie okolo
osi Y 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 smerom
k nám, záporná - od nás. Otočenie sa vykonáva
okolo bodu, ktorý je definovaný vlastnosťou transform-origin.
Syntax
selektor {
transform: rotateY(uhol);
}
Príklad
V tomto príklade sa blok pri prejdení myšou otočí
o 180 stupňov okolo osi Y. 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: rotateY(180deg);
}
:
Príklad
Zmeníme os otáčania 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: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
