Función rotate3d

La función rotate3d establece la rotación de un elemento en un ángulo determinado simultáneamente respecto a los ejes X, Y, Z en el espacio tridimensional. Se utiliza en conjunto con la propiedad transform. El valor de la propiedad es un ángulo en cualquier unidad de ángulos.

Como valores, la función acepta 4 parámetros, escritos separados por comas. Los primeros tres parámetros definen el vector del eje en el espacio tridimensional, respecto al cual se llevará a cabo la rotación. El cuarto parámetro establece el ángulo de rotación.

Sintaxis

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

Ejemplo

En este ejemplo, el vector del eje estará dirigido hacia la esquina superior derecha de la pantalla:

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

Результат:

Véase también