Funktion rotate3d

Die Funktion rotate3d bewirkt eine Drehung des Elements um einen bestimmten Winkel gleichzeitig relativ zur X-, Y- und Z-Achse im dreidimensionalen Raum. Sie wird zusammen mit der Eigenschaft transform verwendet. Als Wert der Eigenschaft dient ein Winkel in beliebigen Winkeleinheiten.

Die Funktion akzeptiert 4 Parameter, durch Kommas getrennt. Die ersten drei Parameter definieren den Achsenvektor im dreidimensionalen Raum, relativ zu dem die Drehung durchgeführt wird. Der vierte Parameter legt den Drehwinkel fest.

Syntax

cssSelektor {
  transform: rotate3d(X, Y, Z, Winkel);
}

Beispiel

In diesem Beispiel zeigt der Achsenvektor in die obere rechte Ecke des Bildschirms:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Siehe auch