Recomendaciones de cursos:

Función rotate3d() de CSS

Definición y uso rotate3d() CSS

rotate3d() La función define la rotación 3D del elemento. transform usado en la propiedad.

Ejemplo

Ejemplo 1

Usar rotate3d() Rotar varios elementos <div>:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Prueba por ti mismo

Ejemplo 2

Usar rotate3d() Rotar imagen:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Prueba por ti mismo

Sintaxis CSS

rotate3d(x, y, z, ángulo)
Valor Descripción
x Número positivo o negativo, define la rotación a lo largo del eje x.
y Número positivo o negativo, define la rotación a lo largo del eje y.
z Número positivo o negativo, define la rotación a lo largo del eje z.
ángulo

Requerido. Especificar el ángulo de rotación. Unidades posibles:

  • deg (grados)
  • rad (radianes)
  • turn (círculo)

Detalles técnicos

Versión: Módulo de Transformaciones CSS Nivel 2

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Páginas relacionadas

Tutoriales:Transformaciones 3D de CSS

Referencia:Atributo transform de CSS

Referencia:Atributo CSS rotate

Referencia:Función rotate() de CSS

Referencia:Función rotateX() de CSS

Referencia:Función rotateY() de CSS

Referencia:Función rotateZ() de CSS