CSS3 transformar propriedade
Exemplos
Rotação elemento div:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
tente »
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
| 属性 | |||||
|---|---|---|---|---|---|
| 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 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
Atributo definições e instruções
2D Transform propriedade é aplicada ao elemento ou conversão 3D. Esta propriedade permite-lhe elementos de girar, zoom, movimento, inclinação e assim por diante.
Para entender melhor as propriedades de transformação, consulte a instância on-line .
| padrão: | nenhum |
|---|---|
| herança: | não |
| versão: | CSS3 |
| sintaxe JavaScript: | objeto .style.transform = "rotate (7deg)" |
gramática
transform:none | transformam-funções;
| valor | descrição |
|---|---|
| nenhum | Definição não converte. |
| matriz (n, n, n,n, n, n) | Definir conversão 2D, utilizando uma matriz de valores de seis. |
| Matrix3D (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n) | conversão em 3D definidos usando 16 valores matriz 4x4. |
| traduzir(x, y) | Definir a conversão 2D. |
| translate3d(x, y, z) | Definir conversão 3D. |
| translateX(x) | Definição de conversão, mas com o valor do eixo-X. |
| translateY(y) | Definição de conversão, mas com o valor do eixo dos Y. |
| translateZ(Z) | Definir conversão 3D, mas com o valor do eixo Z. |
| escala (X [, y]?) | Definir transformação de escala 2D. |
| scale3d(x, y, z) | Definir transformação de escala 3D. |
| scaleX(x) | Ao definir o valor do eixo X para definir a transformação de escala. |
| scaleY(y) | Ao definir o valor do Eixo Y para definir a transformação de escala. |
| scaleZ(Z) | Para definir a transformação de escala 3D, definindo o valor do eixo Z. |
| rotate(angle) | Definir 2D rodado um ângulo pré-determinado no argumento. |
| rotate3d (x, y, z,ângulo) | Definir rotação 3D. |
| rotateX(ângulo) | 3D X é definido ao longo do eixo. |
| rotateY(ângulo) | 3D eixo Y é definido ao longo da rotação. |
| rotateZ(ângulo) | Eixo Z 3D é definida ao longo da rotação. |
| inclinação (ângulo x, yângulo) | Definida ao longo da X 2D e transformação de inclinação do eixo Y. |
| skewX(ângulo) | 2D eixo X é definida ao longo da inclinação da conversão. |
| skewY(ângulo) | Definido ao longo do eixo Y transformação de inclinação 2D. |
| perspectiva(n) | elemento de conversão em 3D para definir uma vista em perspectiva. |
mais exemplos
Girar uma imagem
Este exemplo demonstra como criar um "polaroid" fotos e girar imagens.