Ejemplo
Girar un elemento div:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
Inténtalo tú mismo " Definición y Uso
La propiedad transform aplica una transformación 2D o 3D a un elemento. Esta propiedad le permite rotar, escalar, mover, inclinación, etc., elementos.
Soporte del navegador
La propiedad transform es compatible en Internet Explorer 10 y Firefox.
Internet Explorer 9 es compatible con una alternativa, la propiedad msTransform (2D transforms only) .
Opera, Chrome y Safari soporta una alternativa, la propiedad WebkitTransform (3D y 2D transforma).
Sintaxis
Devolver la propiedad transform:
object .style.transform Establecer la propiedad transform:
object .style.transform="none| Valores de propiedad Valor Descripción none Define que no debe haber ninguna transformación matrix( n,n,n,n,n,n ) Define una transformación 2D, utilizando una matriz de seis valores matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) Define una transformación 3D, usando una matriz de 4x4 de 16 valores translate( x,y ) Define una traducción 2D translate3d( x,y,z ) Define una traducción 3D translateX( x ) Define una traducción, utilizando sólo el valor para el eje X translateY( y ) Define una traducción, utilizando sólo el valor para el eje Y translateZ( z ) Define una traducción 3D, utilizando sólo el valor para el eje Z scale( x,y ) Define una transformación de escala 2D scale3d( x,y,z ) Define una transformación de escala 3D scaleX( x ) Define una transformación de escala, dando un valor para el eje X scaleY( y ) Define una transformación de escala, dando un valor para el eje Y scaleZ( z ) Define una transformación de escala 3D dando un valor para el eje Z rotate( angle ) Define una rotación 2D, el ángulo se especifica en el parámetro rotate3d( x,y,z,angle ) Define una rotación 3D rotateX( angle ) Define una rotación 3D lo largo del eje X rotateY( angle ) Define una rotación 3D a lo largo del eje Y rotateZ( angle ) Define una rotación 3D lo largo del eje Z skew( x-angle,y-angle ) Define una transformación de sesgo 2D a lo largo de los ejes X y el eje Y skewX( angle ) Define una transformación de sesgo 2D lo largo del eje X skewY( angle ) Define una transformación de sesgo 2D a lo largo del eje Y perspective( n ) Define una vista en perspectiva de un elemento transformado en 3D initial Establece esta propiedad a su valor por defecto. Lea acerca inicial inherit Hereda esta propiedad de su elemento padre. Lea acerca de heredar
Detalles técnicos
Valor por defecto: ninguna Valor de retorno: Una cadena, que representa la propiedad transform de un elemento Versión CSS CSS3
Páginas relacionadas
Referencia CSS: transform property
<Estilo de objeto