rotate3d-funktio
rotate3d-funktio asettaa elementin kääntymisen
annetun kulman verran samanaikaisesti
X-, Y- ja Z-akselien ympäri kolmiulotteisessa avaruudessa. Sitä käytetään
yhdessä transform-ominaisuuden kanssa.
Ominaisuuden arvona on kulma missä tahansa kulmayksikössä.
Funktio hyväksyy 4
parametriä, jotka kirjoitetaan pilkuilla erotettuna. Kolme ensimmäistä
parametriä määrittävät akselivektorin kolmiulotteisessa
avaruudessa, jota vastaan
kääntyminen suoritetaan. Neljäs parametri
asettaa kääntymiskulman.
Syntaksi
valitsija {
transform: rotate3d(X, Y, Z, kulma);
}
Esimerkki
Tässä esimerkissä akselivektori suunnataan näytön oikeaan yläkulmaan:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate3d(1, 1, 0, 180deg);
}
:
