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

cssselektor {
  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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateZ(180deg);
}

Результат:

Sien ook