Atributo de estilo transform

Definición y uso

transform La propiedad aplica una transformación 2D o 3D al elemento. Esta propiedad le permite rotar, escalar, mover, inclinar y realizar otras transformaciones en el elemento.

Vea también:

Manual de referencia de CSS:Atributo transform

Ejemplo

Girar el elemento div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Pruebe personalmente

Sintaxis

Retorne el atributo transform:

object.style.transform

Establezca el atributo transform:

object.style.transform = "none|transform-functions|initial|inherit"

Valor del atributo

Valor Descripción
none Defina que no debe haber ninguna transformación.
matrix(n, n, n, n, n, n) Defina la transformación bidimensional utilizando una matriz de seis valores.
matrix3d(n, n, n, n, etc...) Utilice una matriz 4x4 de 16 valores para definir la transformación 3D.
translate(x, y) Define la transición 2D.
translate3d(x, y, z) Define la transición 3D.
translateX(x) Define la transición, utilizando únicamente el valor del eje X.
translateY(y) Define la transición, utilizando únicamente el valor del eje Y.
translateZ(z) Define la transición 3D, utilizando únicamente el valor del eje Z.
scale(x, y) Define la transformación de escala 2D.
scale3d(x, y, z) Define la transformación de escala 3D.
scaleX(x) Define la transformación de escala proporcionando un valor para el eje X.
scaleY(y) Define la transformación de escala proporcionando un valor para el eje Y.
scaleZ(z) Define la transformación de escala 3D proporcionando un valor para el eje Z.
rotate(angle) Define la rotación 2D, especificando el ángulo en los parámetros.
rotate3d(x, y, z, angle) Define la rotación 3D.
rotateX(angle) Define la rotación 3D a lo largo del eje X.
rotateY(angle) Define la rotación 3D a lo largo del eje Y.
rotateZ(angle) Define la rotación 3D a lo largo del eje Z.
skew(x-angle, y-angle) Define la transformación de inclinación 2D a lo largo de los ejes X e Y.
skewX(angle) Define la transformación de inclinación 2D a lo largo del eje X.
skewY(angle) Define la transformación de inclinación 2D a lo largo del eje Y.
perspective(n) Define la perspectiva del elemento de transformación 3D.
initial Establezca este atributo en su valor predeterminado. Consulte initial.
inherit Hereda este atributo de su elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: Ninguno
Valor de retorno: Cadena que representa el Atributo transform.
Versión de CSS: CSS3

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad por primera vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0