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

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

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

Laten we de rotatie-as veranderen met behulp van de eigenschap transform-origin:

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);
}

Результат:

Zie ook