Funksjonen rotateZ
Funksjonen rotateZ setter rotasjon rundt
Z-aksen i tredimensjonalt rom. Den brukes
sammen med egenskapen transform.
Verdien til egenskapen er en vinkel i alle vinkelenheter.
En positiv verdi roterer
med klokken, en negativ - mot klokken.
Rotasjonen utføres rundt punktet som er satt av
egenskapen transform-origin.
Syntaks
velger {
transform: rotateZ(vinkel);
}
Eksempel
I dette eksemplet vil blokken rotere
180 grader rundt Z-aksen ved hover.
For jevn rotasjon er egenskapen
transition lagt til:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
Eksempel
La oss endre rotasjonsaksen med egenskapen
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);
}
:
