Mudando coordenadas no espaço da tela o CSS transforms permite que a posição do conteúdo afetado seja alterada sem afetar o fluxo de informação da página. Elas são implementadas usando um conjunto de propriedades CSS que permitem alterações lineares em elementos HTML. Essas alterações incluem rotação, inclinações, alteração da escala e tradução tanto em 2D quanto em 3D.
Propriedades de CSS transforms
Duas propriedades principais são usadas para definir o CSS transforms: transform and transform-origin
transform-origin- Define a posição de origem do elemento. Por padrão esta posição é o canto superior esquerdo do elemento e pode ser movido. É utilizado para muitas alterações, como rotação, alteração de escala e inclinação, que precisam de um ponto especifico como parâmetro.
transform- Define qual alteração será feita no elemento. Pode-se usar mais de um efeito separado-os por um espaço. Tais efeitos serão aplicados um após o outro, na ordem determinada no código.
Exemplo: Rotação
Este exemplo cria um iframe que permite que a página inicial do Google seja utilizada com uma rotação de 90 graus a partir do canto inferior esquerdo
Veja um exemplo funcionando
Veja uma foto do exemplo
<div style="transform: rotate(90deg); transform-origin: bottom left;">
<iframe src="http://www.google.com/" width="500" height="600"></iframe>
</div>
Example: Inclinando e Movendo
Este exemplo cria um iframe que permite que você use a página inicial do Google inclinada em 10 graus no eixo X.
Veja um exemplo funcionando
View uma foto do exemplo
<div style="transform: skewx(10deg) translatex(150px);
transform-origin: bottom left;">
<iframe src="http://www.google.com/" width="600" height="500"></iframe>
</div>
Propriedades especificas 3D do CSS
Trabalhar com propriedades CSS em 3D é um pouco mais difícil. Você tem que começar configurando o espaço 3D dando perspectiva a ele, então você tem que configurar como os elementos 2D irão se comportar no espaço.
Configurando uma perspectiva
O primeiro elemento a ser configurado é a perspectiva. É ela a responsável pela sensação de 3D. Quanto mais longe o objeto estiver do usuário, menor ele é.
Quanto será a sensação de encolhimento é definida pela propriedade perspective. Quanto menor o valor, mais profundidade terá o objeto.
perspective:0; |
perspective:150px; |
perspective:300px; |
perspective:600px; |
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
O segundo elemento a ser configurado é a posição de visão, que será definida pela propriedade perspective-origin. Por padrão a perspectiva é centralizada, o que nem sempre é o ideal.
perspective-origin:150px 150px; |
perspective-origin:50% 50%; |
perspective-origin:-50px -50px; |
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
Feito isso, você pode trabalhar com elementos 3D.