Usando CSS transforms

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.

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.

Feito isso, você pode trabalhar com elementos 3D.

Elementos 2D em espaço 3D

Veja também

• Transforms-related properties: backface-visibility, perspective, perspective-origin, transform, transform-origin, transform-style.
• Usando deviceorientation com 3D Transforms