Función rotate() de CSS

Definición y uso

CSS rotate() Define la rotación 2D del elemento definido por la función.

rotate() La función en transform Usado en la propiedad.

Ejemplo

Ejemplo 1

Usar rotate() Rotar varios elementos <div>:

#myDiv1 {
  transform: rotate(25deg);
}
#myDiv2 {
  transform: rotate(45deg);
}
#myDiv3 {
  transform: rotate(-45deg);
}

Prueba personalmente

Ejemplo 2

Usar rotate() Rotar imagen:

#img1 {
  transform: rotate(90deg);
}
#img2 {
  transform: rotate(45deg);
}
#img3 {
  transform: rotate(-45deg);
}

Prueba personalmente

Sintaxis de CSS

rotate(ángulo)
Valor Descripción
ángulo

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

  • deg（grado）
  • rad（radián）
  • turn（circunferencia）

Detalles técnicos

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

Compatibilidad del navegador

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutoriales:Transformaciones 2D de CSS

Referencia:Atributo transform de CSS

Referencia:Atributo rotate de CSS

Referencia:Función rotate3d() de CSS

Referencia:Función rotateX() de CSS

Referencia:Función rotateY() de CSS

Referencia:Función rotateZ() de CSS