Atributo transform de CSS

Definición y uso

El atributo transform aplica una transformación 2D o 3D al elemento. Este atributo permite rotar, escalar, mover o inclinar el elemento.

Para entender mejor el atributo transform, consulta estaDemostración.

Vé también:

Tutorial de CSS3:Transformaciones 2D de CSS3

Tutorial de CSS3:Transformaciones 3D de CSS3

Manual de referencia HTML DOM:Atributo transform

Ejemplo

Rotar el elemento div:

div
{
transform:rotate(7deg);
}

Prueba por tu cuenta

Más ejemplos en la parte inferior de la página.

Sintaxis de CSS

transform: none|transform-functions;

Valor de atributo

Valor Descripción prueba
ninguna Definición sin transformación. prueba
matrix(n,n,n,n,n,n) Definición de la transformación 2D, utilizando una matriz de seis valores. prueba
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Definición de la transformación 3D, utilizando una matriz 4x4 de 16 valores.
translate(x,y) definir una transformación 2D. prueba
translate3d(x,y,z) definir una transformación 3D.
translateX(x) definir una transformación, utilizando solo el valor del eje X. prueba
translateY(y) definir una transformación, utilizando solo el valor del eje Y. prueba
translateZ(z) definir una transformación 3D, utilizando solo el valor del eje Z.
scale(x,y) definir una transformación de escalado 2D. prueba
scale3d(x,y,z) definir una transformación de escalado 3D.
scaleX(x) definir una transformación de escalado mediante la asignación de un valor al eje X. prueba
scaleY(y) definir una transformación de escalado mediante la asignación de un valor al eje Y. prueba
scaleZ(z) definir una transformación de escalado 3D mediante la asignación de un valor al eje Z.
rotate(ángulo) definir una rotación 2D, especificando el ángulo en los parámetros. prueba
rotate3d(x,y,z,ángulo) definir una rotación 3D.
rotateX(ángulo) definir una rotación 3D a lo largo del eje X. prueba
rotateY(ángulo) definir una rotación 3D a lo largo del eje Y. prueba
rotateZ(ángulo) definir una rotación 3D a lo largo del eje Z. prueba
skew(ángulo-x,ángulo-y) definir una transformación de inclinación 2D a lo largo de los ejes X e Y. prueba
skewX(ángulo) definir una transformación de inclinación 2D a lo largo del eje X. prueba
skewY(ángulo) definir una transformación de inclinación 2D a lo largo del eje Y. prueba
perspective(n) definir una vista de perspectiva para los elementos de transformación 3D. prueba

detalles técnicos

valor por defecto: ninguna
heredabilidad: no
versión: CSS3
Sintaxis de JavaScript: objeto.style.transform="girar(7grados)"

más ejemplos

imagen lanzada sobre la mesa
Este ejemplo muestra cómo crear una imagen de Polaroid y rotar la imagen.

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente la propiedad.

Los números con -webkit-、-moz- o -ms- indican la primera versión con prefijo utilizada.

propiedad Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-