Functie rotate3d

De functie rotate3d specificeert de rotatie van een element over een opgegeven hoek, gelijktijdig rond de X-, Y- en 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.

De functie accepteert 4 parameters, gescheiden door komma's. De eerste drie parameters bepalen de vector van de as in de driedimensionale ruimte, waaromheen de rotatie zal plaatsvinden. De vierde parameter specificeert de rotatiehoek.

Syntaxis

cssselector {
  transform: rotate3d(X, Y, Z, hoek);
}

Voorbeeld

In dit voorbeeld wijst de asvector naar de rechterbovenhoek van het scherm:

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

Результат:

Zie ook