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).
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="https://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="https://www.google.com/" width="600px" height="500px" /> </div>