Funkcia rotateX
Funkcia rotateX definuje otočenie okolo
osi X 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: rotateX(uhol);
}
Príklad
V tomto príklade sa blok pri prejdení myšou otočí
o 180 stupňov okolo osi X. 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: rotateX(180deg);
}
:
Príklad
Zmeň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: rotateX(180deg);
}
:
Príklad
Nastavme záporný uhol:
<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: rotateX(-180deg);
}
:
