Funktion rotateX

Die Funktion rotateX definiert eine Drehung um die X-Achse im dreidimensionalen Raum. Wird zusammen mit der Eigenschaft transform verwendet. Als Wert dient ein Winkel in beliebigen Winkeleinheiten. Ein positiver Wert dreht das Element zu uns, ein negativer von uns weg. Die Drehung erfolgt um den Punkt, der durch die Eigenschaft transform-origin festgelegt wird.

Syntax

cssSelektor {
  transform: rotateX(Winkel);
}

Beispiel

In diesem Beispiel dreht sich der Block bei Mouseover um 180 Grad um die X-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: rotateX(180deg);
}

Результат:

Beispiel

Wir ändern 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: rotateX(180deg);
}

Результат:

Beispiel

Wir setzen einen negativen Winkel:

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: rotateX(-180deg);
}

Результат:

Siehe auch