CSS3 Transforms

Agora sim! Vamos conhecer umas das melhores features do CSS3, o que vai literalmente transformar sua percepção da linguagem :D

A syntax é bem simples: transform: <valor>(<parametros>);. O que pode ser confuso olhando pela primeira vez é que o valor funciona como uma função recebendo um ou mais parâmetros, mas não se preocupem, falando assim parece mais dificíl do que realmente é ;)

Translate

Vamos começar usando nosso amigo translate para mover os elementos pela página. Podemos mover um elemento pelo eixo X (horizontal) ou Y (vertical) de forma simples, saca só:

TranslateX

Viu só como é de boas. Usamos a propriedade transform com o valor translateX passando 80px como parâmetro.

TranslateY

Aqui temos a mesma regra do exemplo anterior, porém agora movemos nosso elemento pelo eixo Y (vertical).

TranslateXY

Agora mudamos um pouco, em nosso valor omitimos o X e Y e usamos apenas translate, dessa forma podemos passar dois parâmetros separados por vírgula e definir X e Y ao mesmo tempo.

transform: translate(X,Y);

Scale

Esse cara permite aumentar ou diminuir o tamanho vertical, horizontal ou proporcional de um elemento e seus filhos.

Lembrando que daqui para frente continuaremos seguindo o padrão transform: <valor>(<parametros>);

ScaleX

Diminuimos a largura do elemento, agora ele tem apenas 50% da largura original. Tentem apagar o transform ou alterar seus valores para perceberem melhor o que está acontecendo.

ScaleY

Opa, seguindo a mesma logica do anterior aumentamos a altura do elemento para 130% do original.

ScaleXY

Como no exemplo do translate, agora omitimos o X e Y para passarmos dois parâmetros de uma vez.

Dica: Quando um valor começa com 0, podemos omitir o 0. Exemplo: o valor 0.7 pode ser representado apenas por .7

Rotate

Como o próprio nome sugere, com o rotate podemos rotacionar nossos elementos. Se liga só na syntax:

transform: rotate(<numero>deg);

Para não deixar duvidas, vamos esclarecer uma coisa, a unidade de medina deg significa degrees (graus). Bem fácil não?

Skew

SkewX

Agora ferrou, não sei traduzir "Skew", vamos falar que ele deixa seu elemento "fora de esquadro" rsrsr. Nesse caso ele faz isso no eixo X ou seja horizontalmente.

SkewY

A mesma coisa do anterior, porém no eixo Y ou seja verticalmente ;)

Dica para evitar dores de cabeça

Quando você utiliza mais de um transform no mesmo elemento, o segundo transform se sobrepõem ao primeiro. Para resolver isso podemos declarar mais de um valor na mesma propriedade.

  // Declaração incorreta onde o scale sobrepõem o translateX.
.elemento {
  transform: translateX(80px);
  transform: scale(.5);
}

  // Declaração correta onde o scale e o translateX funcionam juntos.
.elemento {
  transform: translateX(80px) scale(.5);
}

Conclusão

Ufa, hoje vimos bastente coisa sobre o tão falado CSS3, ainda veremos mais, acreditem quando digo que criar animações combinadas com nossas transformações geram coisas muito iradas! Mas isso é assunto para um próximo post :)

Até amanhã.

<-- #2 - Posicionamento | Lista completa | #4 - Desenhando com amor -->


1,267 3 9