Exemplo
Rodar um <div> elemento:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Tente você mesmo " Definição e Uso
A propriedade transform aplica uma transformação de 2D ou 3D a um elemento. Esta propriedade permite girar, escala, movimento, inclinação, etc., elementos.
Para entender melhor a propriedade transformar, ver uma demonstração .
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.transform="rotate(7deg)" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz-, ou O- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| transform (2D) | 36,0 4.0 -webkit- | 10.0 9,0 -ms- | 16,0 3,5 -moz- | 9 3.2 -webkit- | 23,0 15,0 -webkit- 10,5 -o- |
| transform (3D) | 36,0 12,0 -webkit- | 12.0 | 10.0 | 16,0 10,0 -moz- | 9 4.0 -webkit- |
Sintaxe
transform: none|transform-functions|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| none | Define que não deve haver nenhuma transformação | Jogue " |
| matrix( n,n,n,n,n,n ) | Define uma transformação 2D, utilizando uma matriz de valores de seis | Jogue " |
| 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 | Jogue " |
| translate3d( x,y,z ) | Define uma tradução 3D | |
| translateX( x ) | Define uma tradução, usando somente o valor para o eixo X- | Jogue " |
| translateY( y ) | Define uma tradução, utilizando apenas o valor do eixo dos Y | Jogue " |
| translateZ( z ) | Define uma tradução 3D, utilizando apenas o valor do eixo Z | |
| scale( x,y ) | Define uma transformação de escala 2D | Jogue " |
| scale3d( x,y,z ) | Define uma transformação de escala 3D | |
| scaleX( x ) | Define uma transformação de escala, dando um valor para o eixo X | Jogue " |
| scaleY( y ) | Define uma transformação de escala, dando um valor para o eixo Y | Jogue " |
| scaleZ( z ) | Define uma transformação de escala 3D, dando um valor para o eixo Z | |
| rotate( angle ) | Define uma rotação 2D, o ângulo é especificado no parâmetro | Jogue " |
| rotate3d( x,y,z,angle ) | Define uma rotação 3D | |
| rotateX( angle ) | Define uma rotação 3D ao longo do eixo-X | Jogue " |
| rotateY( angle ) | Define uma rotação 3D ao longo do eixo Y | Jogue " |
| rotateZ( angle ) | Define uma rotação 3D ao longo do eixo Z | Jogue " |
| skew( x-angle,y-angle ) | Define uma transformação de inclinação 2D ao longo do X e do eixo Y | Jogue " |
| skewX( angle ) | Define uma transformação de inclinação 2D ao longo do eixo-X | Jogue " |
| skewY( angle ) | Define uma transformação de inclinação 2D ao longo do eixo Y | Jogue " |
| perspective( n ) | Define uma vista em perspectiva de um elemento transformado 3D | |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Imagens jogados na mesa
Este exemplo demonstra como criar "polaroid" fotos e rodar as imagens.
Páginas relacionadas
Tutorial CSS: CSS 2D Transformadas
Tutorial CSS: transformações CSS 3D
HTML DOM de referência: transform property