Functie rotateZ
De functie rotateZ specificeert een rotatie rond
de Z-as in de driedimensionale ruimte. Wordt gebruikt
in combinatie met de eigenschap transform.
De waarde van de eigenschap is een hoek in elke hoekeenheid.
Een positieve waarde roteert
met de klok mee, een negatieve waarde - tegen de klok in.
De rotatie vindt plaats rond het punt dat wordt gespecificeerd door
de eigenschap transform-origin.
Syntaxis
selector {
transform: rotateZ(hoek);
}
Voorbeeld
In dit voorbeeld zal het blok bij hover roteren
met 180 graden rond de Z-as. Voor vloeiende
rotatie is de eigenschap transition toegevoegd:
<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
Laten we de rotatie-as veranderen met behulp van de eigenschap
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);
}
:
