Funksie rotateZ
Die funksie rotateZ spesifiseer 'n rotasie relatief tot
die Z-as in driedimensionele ruimte. Dit word gebruik
saam met die eienskap transform.
Die waarde van die eienskap is 'n hoek in enige hoeke-eenhede.
'n Positiewe waarde draai
met die wysers van die klok mee, 'n negatiewe een - teen.
Die rotasie vind plaas om die punt wat gespesifiseer word deur
die eienskap transform-origin.
Sintaksis
selektor {
transform: rotateZ(hoek);
}
Voorbeeld
In hierdie voorbeeld sal die blok oor 180 grade
om die Z-as draai wanneer daar daaroor gehover word. Vir 'n
vlotheid van die rotasie is die eienskap transition bygevoeg:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
Voorbeeld
Laat ons die rotasie-as verander deur die eienskap
transform-origin te gebruik:
<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);
}
:
