Como usar transformações css3

Video: Create CSS Icon With Font Awesome - No images - Animated Social Icon - Css Hover Effects

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. Traduçã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. Toma um parâmetro, uma medição do ângulo, em graus. (Por exemplo, 30 graus é 30deg.)

• escala: Altera o tamanho do objeto. As alterações de versão padrão, tanto o tamanho vertical e horizontal 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 medição CSS padrão. Se escala é maior que 1, o objeto é 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:

caixa 1
 
caixa 2
Video: CSS3 - Aula 22 - Transformações 3D
 
caixa 3
 
caixa 4
 
caixa 5

O código mostra cinco idêntico divs. Para fins de ilustração, todo o divs compartilhar o mesmo CSS comum:

# Box1, # box2, # Box3, # box4, # box5 {width: 100px; altura: 80px; border: 3px sólida preto-background-color: amarelo-}

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

Video: CSS Transition (CSS Animations Series Part 1)

# Box2 {transform: traduzir (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 suporta a versão não-prefixado. IE 10 teoricamente funciona com a versão standard, 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 diversos navegadores:

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

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