CSS/Usando_transformações_CSS

Firefox 3.5 (Gecko 1.9.1) introduz suporte a transformações CSS; estas são implementadas utilizando um conjunto de propriedades CSS permitindo a você aplicar transformações lineares a elementos HTML. Essas transformações são baseadas sobre o design proposto pelo time WebKit e incluem rotar, inclinar, escalar e usar translação. Enquanto isso, é um W3C working draft.

Mozilla atualmente suporta as propriedades -moz-transform e -moz-transform-origin. Para detalhes sobre onde funções de transformação são suportadas, veja o artigo CSS transform functions (en).

Nota: Até o momento não há suporte ao eixo Z, portanto, perspectiva, rotação 3D, escala 3D, e transformações 3D não são suportadas.

Exemplo: Rotação

Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, girada 90 graus sobre seu canto inferior esquerdo.

Visualizar exemplo
Visualizar screenshot do exemplo

<div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="500px" height="600px" />
</div>

Exemplo: Inclinação e translação

Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, inclinada 10 graus no eicho X.

Visualizar exemplo
Visualizar screenshot do exemplo

<div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="600px" height="500px" />
</div>

Veja também

Etiquetas do documento e colaboradores

Contributors to this page: teoli, Verruckt, Leandro Mercês Xavier, Jürgen Jeka
Última atualização por: teoli,