Transformação CSS 3D Em CSS, além da transformação 2D de elementos na página, você também pode realizar transformação 3D em elementos de objetos (pense na página como um espaço tridimensional para mover, girar, dimensionar e inclinar elementos na página, etc. .). Assim como as transformações 2D, as transformações 3D não afetam os elementos circundantes e podem se sobrepor a outros elementos. Contudo, o elemento transformado ainda ocupará espaço na sua posição padrão (antes da transformação).
Sistema de coordenadas tridimensionais
Vamos primeiro entender o sistema de coordenadas tridimensional. O chamado sistema de coordenadas tridimensional adiciona um eixo z ao sistema de coordenadas bidimensional original, formando assim um espaço tridimensional, conforme mostrado na figura abaixo:
①eixo x: Horizontalmente para a direita Nota: O lado direito de x é um valor positivo e o lado esquerdo é um valor negativo
②eixo y: verticalmente para baixo Nota: y tem valores positivos abaixo e valores negativos acima.
③Eixo Z: Tela vertical Nota: Valores positivos para fora e valores negativos para dentro
Propriedades de conversão
Método de transformação 3D
1.traduzir3d()
A função translate3d() é usada para mover a posição de um elemento no espaço 3D. A característica desta transformação é definir o deslocamento do elemento em cada direção (eixo X, eixo Y, eixo Z) através de três. coordenadas vetoriais dimensionais. O formato da sintaxe da função é o seguinte:
traduzir3d(tx,ty,tz)
A descrição do parâmetro é a seguinte:
(1) tx: representa a distância que o elemento percorre na direção horizontal (eixo X);
(2) ty: representa a distância percorrida no sentido vertical (eixo Z) do elemento;
(3) tz: Indica a distância que o elemento percorre no eixo Z. Valores percentuais não podem ser usados para este parâmetro.
2. traduzirZ()
A função translateZ() é usada para mover elementos ao longo do eixo Z do sistema de coordenadas tridimensional. O formato da sintaxe da função é o seguinte:
traduzirZ(tz);
O parâmetro tz é usado para definir a distância que o elemento se move no eixo Z.
Dica: translateZ(tz); é equivalente à abreviatura de translate3d(0, 0, tz);.
3.rotate3d()
A função rotate3d() é usada para definir o ângulo de rotação do elemento ao longo do eixo X, eixo Y ou eixo Z. Esta função apenas girará o elemento ao longo do eixo fixo e não deformará o elemento. O formato da sintaxe da função rotate3d() é o seguinte:
girar3d(x,y,z,a)
A descrição do parâmetro é a seguinte:
x: Defina a coordenada do eixo X do eixo de rotação;
y: Defina a coordenada do eixo Y do eixo de rotação;
z: Defina a coordenada do eixo Z do eixo de rotação;
a: Defina o ângulo de rotação do elemento. Um ângulo positivo significa rotação no sentido horário e um ângulo negativo significa rotação no sentido anti-horário.
4.escala3d()
A função scale3d() pode alterar o tamanho (escala) dos elementos. O formato da sintaxe da função é o seguinte:
escala3d(sx,sy,sz)
A descrição do parâmetro é a seguinte:
sx: representa a proporção de escala do elemento na direção do eixo X;
sy: representa a proporção de escala do elemento na direção do eixo Y;
sz: Indica a taxa de escala do elemento na direção do eixo Z.
5.matriz3d()
A função Matrix3d() é muito semelhante à função Matrix() que aprendemos anteriormente, mas a função Matrix3d() pode usar uma matriz 4 × 4 para descrever uma transformação tridimensional (3D). Todas as operações de conversão 3D podem ser realizadas de uma vez por meio da função array3d(). O formato da sintaxe da função é o seguinte:
matriz3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
A descrição do parâmetro é a seguinte:
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: usado para descrever várias transformações 3D;
a4, b4, c4: Indica a quantidade de transformação do elemento.
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Document</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*Deixe a subcaixa manter um Espaço 3D Ambiente*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100 %; cor de fundo:rosa;}.boxdiv:last-child{cor de fundo:aquamarine;transform:rotateX(60deg);}</style></head><body><div><div><div> </div><div></div></div></div></body></html>Resultados em execução:
