Conversão 3D CSS3

transformações 3D

CSS3 permite a utilização de 3D para formatar elemento de conversão.

Neste capítulo, você vai aprender alguns dos métodos de conversão 3D:

Clique sobre os seguintes elementos para ver a diferença entre 2D e 3D Conversão Conversão entre:

2D girar

3D girar

Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.

Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.

属性
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-

rotateX () método, cujos elementos em torno de um dado número de graus de rotação no eixo-X.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

rotateY () método, cujos elementos em torno de um dado número de graus de rotação no eixo Y.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

A tabela a seguir lista todas as propriedades de transformação:

propriedade	descrição	CSS
transformar	Aplicada ao elemento 2D ou 3D conversão.	3
transform-origin	Ele permite que você mude a posição do elemento a ser convertido.	3
transformar-style	Provisão foi como elementos aninhados são exibidos no espaço 3D.	3
perspectiva	Disposições 3D efeito elemento perspectiva.	3
perspectiva de origem	Uma posição pré-determinada da parte inferior do elemento de 3D.	3
backface visibilidade	Definir os elementos, quando não em face da tela é visível.	3

função	descrição
Matrix3D (N, N, N,N, N, N, n, n, n, n,n, n, n, n, n, n)	conversão em 3D definidos usando 16 valores matriz 4x4.
translate3d(x, y, z)	transformação 3D definido.
translateX(x)	Definir conversão 3D, utilizando apenas os valores para o eixo X.
translateY(y)	Definir conversão 3D, utilizando apenas os valores para o eixo Y.
translateZ(Z)	Definir conversão 3D, utilizando apenas os valores para o eixo Z.
scale3d(x, y, z)	Definir transformação de escala 3D.
scaleX(x)	transformação de escala 3D é definida por um determinado valor de X-eixo.
scaleY(y)	transformação de escala 3D é definida por um determinado valor de Y-eixo.
scaleZ(Z)	transformação de escala 3D é definida por um determinado valor de eixo z.
rotate3d (x, y, z,ângulo)	Definir rotação 3D.
rotateX(ângulo)	Definida ao longo da rotação do eixo X 3D.
rotateY(ângulo)	Definida ao longo da rotação de eixo Y 3D.
rotateZ(ângulo)	Definida ao longo da rotação Z eixo 3D.
perspectiva(n)	vista em perspectiva em 3D da definição do elemento de conversão.