Usando CSS transforms

by 1 colaborador:

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ãmentro.
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 ifram 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.

Elementos 2D em espaço 3D

Veja também

Etiquetas do documento e colaboradores

Contributors to this page: francineemilia
Última atualização por: francineemilia,