Funktion rotateY

Die Funktion rotateY definiert eine Drehung um die Y-Achse im dreidimensionalen Raum. Sie wird zusammen mit der Eigenschaft transform verwendet. Als Wert der Eigenschaft 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 definiert wird.

Syntax

cssSelektor {
  transform: rotateY(Winkel);
}

Beispiel

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

Результат:

Beispiel

Ändern der 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: right center;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

Siehe auch