Exemplo
Girar um elemento div:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
Tente você mesmo " Definição e Uso
A propriedade transformar aplica uma transformação de 2D ou 3D a um elemento. Esta propriedade permite girar, escala, movimento, inclinação, etc., elementos.
Suporte navegador
A propriedade transform é suportada no Internet Explorer 10 e Firefox.
Internet Explorer 9 suporta uma alternativa, a propriedade msTransform (2D transforms only) .
Opera, Chrome e Safari apoiar uma alternativa, a propriedade WebkitTransform (3D e 2D transforma).
Sintaxe
Devolver a propriedade transform:
object .style.transform Defina a propriedade transform:
object .style.transform="none| Valores de propriedade Valor Descrição none Define que não deve haver nenhuma transformação matrix( n,n,n,n,n,n ) Define uma transformação 2D, utilizando uma matriz de seis valores matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) Define uma transformação 3D, usando uma matriz de 4x4 de 16 valores translate( x,y ) Define uma tradução 2D translate3d( x,y,z ) Define uma tradução 3D translateX( x ) Define uma tradução, utilizando apenas o valor para o eixo X- translateY( y ) Define uma tradução, utilizando apenas o valor para o eixo Y translateZ( z ) Define uma tradução 3D, utilizando apenas o valor para o eixo Z scale( x,y ) Define uma transformação de escala 2D scale3d( x,y,z ) Define uma transformação escala 3D scaleX( x ) Define uma transformação de escala, dando um valor para o eixo X- scaleY( y ) Define uma transformação de escala, dando um valor para o eixo Y scaleZ( z ) Define uma transformação escala 3D, dando um valor para o eixo Z rotate( angle ) Define uma rotação 2D, o ângulo é especificado no parâmetro rotate3d( x,y,z,angle ) Define uma rotação 3D rotateX( angle ) Define uma rotação 3D ao longo do eixo-X rotateY( angle ) Define uma rotação 3D ao longo do eixo Y rotateZ( angle ) Define uma rotação 3D ao longo do eixo Z skew( x-angle,y-angle ) Define uma transformação de inclinação 2D ao longo dos eixos X e o eixo Y skewX( angle ) Define uma transformação de inclinação 2D ao longo do eixo-X skewY( angle ) Define uma transformação de inclinação 2D ao longo do eixo Y perspective( n ) Define uma vista em perspectiva de um elemento de transformada 3D initial Define essa propriedade para seu valor padrão. Leia sobre inicial inherit Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar
Detalhes técnicos
Valor padrão: Nenhum Valor de retorno: A String, que representa a propriedade de transformar de um elemento CSS Versão CSS3
Páginas relacionadas
Referência CSS: transform property
<Estilo de objeto