CSS3 Transformações 3D
CSS3 permite formatar seus elementos usando transformações 3D.
Passe o mouse sobre os elementos abaixo para ver a diferença entre um 2D e uma transformação 3D:
Suporte navegador para transformações 3D
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz- , ou -o- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 Transformações 3D
Neste capítulo, você aprenderá sobre os seguintes métodos de transformação 3D:
-
rotateX() -
rotateY() -
rotateZ()
O rotateX() Método
O rotateX() método gira um elemento em torno do seu eixo X em um determinado grau:
Exemplo
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Tente você mesmo " O rotateY() Método
O rotateY() método gira um elemento em torno do seu eixo Y em um determinado grau:
Exemplo
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Tente você mesmo " O rotateZ() Método
O rotateZ() método gira um elemento em torno do seu eixo Z em um determinado grau:
Exemplo
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
CSS3 Transform Properties
A tabela seguinte lista todos os 3D transformar propriedades:
| Propriedade | Descrição |
|---|---|
| transform | Aplica-se uma transformação 2D ou 3D a um elemento |
| transform-origin | Permite-lhe alterar a posição sobre elementos transformados |
| transform-style | Especifica como elementos aninhados são renderizados no espaço 3D |
| perspective | Especifica a perspectiva sobre a forma como os elementos 3D são vistos |
| perspective-origin | Especifica a posição inferior de elementos 3D |
| backface-visibility | Define se ou não um elemento deve ser visível quando não voltado para o ecrã |
3D Transform Métodos
| Função | Descrição |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Define uma transformação 3D, usando uma matriz de 4x4 de 16 valores |
| translate3d(x,y,z) | Define uma tradução 3D |
| translateX(x) | Define uma tradução 3D, utilizando apenas o valor do eixo X |
| translateY(y) | Define uma tradução 3D, utilizando apenas o valor do eixo dos Y |
| translateZ(z) | Define uma tradução 3D, utilizando apenas o valor do eixo Z |
| scale3d(x,y,z) | Define uma transformação de escala 3D |
| scaleX(x) | Define uma transformação de escala 3D, dando um valor para o eixo X |
| scaleY(y) | Define uma transformação de escala 3D, dando um valor para o eixo Y |
| scaleZ(z) | Define uma transformação de escala 3D, dando um valor para o eixo Z |
| rotate3d(x,y,z,angle) | Define uma rotação 3D |
| rotateX(angle) | Define uma rotação 3D ao longo do eixo-X |
| rotateY(angle) | Define uma rotação 3D ao longo do eixo Y |
| rotateZ(angle) | Define uma rotação 3D ao longo do eixo Z |
| perspective(n) | Define uma vista em perspectiva de um elemento transformado 3D |