O melhor tutorial Conversão 3D CSS3 em 2024. Neste tutorial você pode aprender transformações 3D,Suporte a navegadores,rotateX () Método,Exemplos,rotateY () Método,Exemplos,propriedade de conversão,método de conversão 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:
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.
rotateY () método, cujos elementos em torno de um dado número de graus de rotação no eixo Y.
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. |