Recomendaciones de cursos:

Función rotateX() de CSS

Definición y uso rotateX() CSS

rotateX() La función define la rotación 3D del elemento alrededor del eje x (dirección horizontal). transform usado en la propiedad.

Ejemplo

Ejemplo 1

Usar rotateX() Gira varios elementos <div> alrededor del eje x (dirección horizontal):

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

Prueba personalmente

Ejemplo 2

Usar rotateX() Gira la imagen alrededor del eje x (dirección horizontal):

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

Prueba personalmente

Sintaxis CSS

rotateX(ángulo)
Valor Descripción
ángulo

Obligatorio. Especificar el ángulo de rotación. Las unidades posibles son:

  • 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 esta función por primera vez.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Páginas relacionadas

Tutoriales:Transformaciones 3D CSS

Referencia:Atributo transform de CSS

Referencia:Atributo rotate de CSS

Referencia:Función rotate() de CSS

Referencia:Función rotate3d() de CSS

Referencia:Función rotateY() de CSS

Referencia:Función rotateZ() de CSS