Recomendaciones de cursos:

Función rotateZ() de CSS

Definición y uso rotateZ() CSS

rotateZ() La función define una rotación 3D de un elemento alrededor del eje z. transform Usado en la propiedad.

Consejo:rotateZ(angle) Equivalente a rotate(angle).

Ejemplo

Ejemplo 1

Usar rotateZ() Girar varios elementos <div> alrededor del eje z:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Prueba personalmente

Ejemplo 2

Usar rotateZ() Girar la imagen alrededor del eje z:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Prueba personalmente

Sintaxis de CSS

rotateZ(angle)
Valor Descripción
angle

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

  • deg（grados）
  • rad（radianes）
  • turn（circunferencia）

Detalles técnicos

Versión: CSS Transforms Module Level 2

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero completamente soporta esta función.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Páginas relacionadas

Tutoriales:Transformaciones 3D en CSS

Referencia:Atributo transform de CSS

Referencia:Atributo CSS rotate

Referencia:Función rotate() de CSS

Referencia:Función rotate3d() de CSS

Referencia:Función rotateX() de CSS

Referencia:Función rotateY() de CSS