Como usar CSS3 Transformações

CSS3 inclui a capacidade de aplicar transformações geométricas em qualquer elemento na sua página web HTML5. Isto fornece um notável nível de controle visual não previamente disponível para desenvolvedores web.

o transformar atributo permite que você aplique uma transformação matemática para qualquer div. Quando você aplica transformar a um elemento, você precisa aplicar um ou mais dos seguintes parâmetros para descrever o tipo de transformação:

  • traduzir: Move o objeto de sua posição padrão. A conversão requer dois parâmetros, uma medição de X e Y uma medição. Use as unidades de medida CSS padrão.

  • rodar: Gira a imagem em torno do seu valor central. Assume um parâmetro, uma medida do ângulo em graus. (Por exemplo, 30 graus é 30deg.)

  • escala: Altera o tamanho do objecto. As mudanças de versão padrão, tanto o tamanho horizontal e vertical de maneira uniforme. o scaleX e scaley atributos podem ser usadas para ajustar a escala ao longo de um eixo individual. Escala é medida em unidades de medida CSS padrão. Se escala é maior do que 1, o objecto é maior do que o original. A escala entre zero e um faz o item menor do que era.

  • enviesado: Isso permite que você incline o elemento por algum ângulo. O parâmetro requer uma medição do ângulo em graus. o skewX e skewY variações permitem um controlo mais completo da transformação.

Você pode combinar vários parâmetros, listando-os após o atributo transformar separados por espaços.

Para ilustrar, imagine o seguinte trecho de HTML:

1 caixa
 
Caixa 2
 
Caixa 3
 
casa 4
 
Caixa 5

O código mostra cinco idênticos divs. Para fins de ilustração, a todos divs compartilham o mesmo CSS comum:

# Box1, # box2, # Box3, # box4, # box5 {width: 100px; height: 80px; border: 3px sólido negro background-color: amarelo-}

Aplicar variações do atributo para cada elemento para ver como as transformações trabalhar.

image0.jpg
# Box2 {transform: translate (100px, 0px) -} # Box3 {transform: rotate (45deg) -} # box4 {transformação: escala (2) traduzir (100px, 0px) -} # box5 {transform: inclinação (3) -}

Note que o suporte ao navegador está mudando neste elemento. Chrome e Safari ainda esperar que o -webkit prefixo, mas o Firefox e Opera suportam a versão não-prefixado. IE 10 teoricamente funciona com a versão padrão, mas a versão 9 requer a -Senhora- prefixo, e versões anteriores do IE simplesmente ignorar transformações completamente. Se você visualizar o código fonte real do site transform.html, você verá várias versões para lidar com os vários navegadores:

 # Box2 {transform: translate (100px, 0px) - webkit-transform: translate (100px, 0px) - ms-transform: translate (100px, 0px) -}

Eventualmente, o senso comum vai sair e prefixos específicos do fornecedor não será mais necessário, mas, por enquanto, é mais seguro para colocá-los no lugar. Se você quiser pegar versões mais antigas do Firefox e Opera, você também pode incluir estes (-moz-e -o-) Prefixos bem.

Semelhante

menu