Funktion rotateZ

Die Funktion rotateZ definiert eine Drehung um die Z-Achse im dreidimensionalen Raum. Wird zusammen mit der Eigenschaft transform verwendet. Als Wert der Eigenschaft dient ein Winkel in beliebigen Winkeleinheiten. Ein positiver Wert dreht im Uhrzeigersinn, ein negativer - gegen den Uhrzeigersinn. Die Drehung erfolgt um den Punkt, der durch die Eigenschaft transform-origin festgelegt wird.

Syntax

cssSelektor {
  transform: rotateZ(Winkel);
}

Beispiel

In diesem Beispiel dreht sich der Block bei Hover um 180 Grad um die Z-Achse. Für eine flüssige Drehung wurde die Eigenschaft transition hinzugefügt:

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

Результат:

Beispiel

Ändern wir die Drehachse mit der Eigenschaft 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);
}

Результат:

Siehe auch