Atributo CSS rotate

Página anterior Derecha
Página siguiente row-gap

Definición y uso

rotate La propiedad permite rotar el elemento.

rotate La propiedad define un valor que representa el grado de rotación del elemento en el sentido de las agujas del reloj alrededor del eje z. Para rotar el elemento alrededor del eje x, y o de otra manera, debe realizarse una definición correspondiente.

rotate El valor de la propiedad puede ser un ángulo, nombre del eje + ángulo o tres valores + ángulo.

Si solo se proporciona un ángulo, el elemento se rotará en el sentido de las agujas del reloj alrededor del eje z.
Si se proporciona el nombre del eje + ángulo, el elemento se rotará en el sentido de las agujas del reloj alrededor del eje especificado.
Si se proporcionan tres valores + ángulo, estos tres valores definen un vector, alrededor del cual se rotará el elemento.

para entender mejor rotate propiedad, consulteDemostración.

Nota:Otra técnica para rotar elementos es usar con Función rotate() de CSS del atributo CSS transform.

Ejemplo

Ejemplo 1

Cambiar la rotación del elemento:

div {
  rotate: 30deg;
}

Pruebe usted mismo

Ejemplo 2

cuando rotate Cuando se establecen el vector y el ángulo, el elemento se rotará alrededor del vector.

Aquí, el vector es [1 1 0] en el plano bidimensional, con coordenadas x e y, y luego se rota 60 grados:

div {
  rotate: 1 1 0 60deg;
}

Pruebe usted mismo

Sintaxis de CSS

rotate: axis angle|initial|inherit;

Valor del atributo

Valor	Descripción
axis	opcional. Si no se establece, el valor predeterminado es el eje z. Define el eje alrededor del cual se rotará el elemento. Valores posibles: x y z
angle	Define el grado de rotación del elemento. Unidades posibles: deg（grados） rad（radián） turn（circuito）
vector angle	Estos tres números definen un vector, alrededor del cual se rotará el elemento. Estos tres números son las coordenadas x, y y z del vector. El último valor es el ángulo de rotación. Valores posibles: number number number angle
initial	Establezca este atributo en su valor predeterminado. Ver: initial.
inherit	Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado:	none
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.rotate="-120deg"