Try This!

O CSS3 Transformations permite que você aplique rotações, escalas, distorções e transições com estilos simples a qualquer elemento DOM.

pre {
transform: rotate(-1deg) skewX(5deg);
}

As transições permitem que você especifique como o estilo de um elemento DOM será animado entre estados transformados. Por exemplo, você pode animar a cor do segundo plano quando o usuário passar o mouse sobre um elemento. Passe o mouse sobre o código!

pre {
  transition: all 1s ease-inout;
}

pre:hover {
  background-color: #F2F5FE;
  border-color: black;
}

Aplicar transformações 3D também é simples. Basta especificar a transformação em coordenadas 3D. Passe o mouse sobre este código!

div {
  transform: rotate3d(1,1,0, 45deg);
}

Demos

In the Wild

Resources

• CSS3 Spec status A lista dos status atual das especificações do CSS3.
• W3C Spec: CSS3 Selectors Esta especificação W3C define os novos seletores disponíveis para desenvolvedores.
• W3C Draft CSS3 2d Transform module Esta especificação W3C define como rotações, transformações, distorções e dimensionamento podem ser aplicados a elementos DOM em duas dimensões.
• W3C Draft CSS3 3d Transform module Esta especificação W3C define como transformações 3d devem ser aplicadas a elementos DOM.
• W3C Draft CSS3 Transition Module Esta especificação W3C define como propriedades devem ser animadas entre os estados.
• W3C Draft CSS3 Animation Module Esta especificação W3C define as novas propriedades de animação disponíveis.