Transformación CSS 3D En CSS, además de la transformación 2D de elementos en la página, también puede realizar transformaciones 3D en elementos de objetos (piense en la página como un espacio tridimensional para mover, rotar, escalar e inclinar elementos en la página, etc. .). Al igual que las transformaciones 2D, las transformaciones 3D no afectan a los elementos circundantes y pueden superponerse a otros elementos. Sin embargo, el elemento transformado seguirá ocupando espacio en su posición predeterminada (antes de la transformación).
Sistema de coordenadas tridimensional
Primero comprendamos el sistema de coordenadas tridimensional. El llamado sistema de coordenadas tridimensional agrega un eje z al sistema de coordenadas bidimensional original, formando así un espacio tridimensional, como se muestra en la siguiente figura:
①Eje x: horizontalmente hacia la derecha Nota: El lado derecho de x es un valor positivo y el lado izquierdo es un valor negativo
②eje y: verticalmente hacia abajo Nota: y tiene valores positivos debajo y valores negativos arriba.
③Eje Z: Pantalla vertical Nota: Valores positivos hacia el exterior y valores negativos hacia el interior
Propiedades de conversión
Método de transformación 3D
1.traducir3d()
La función traducir3d() se utiliza para mover la posición de un elemento en el espacio 3D. La característica de esta transformación es definir el desplazamiento del elemento en cada dirección (eje X, eje Y, eje Z) a través de tres. coordenadas vectoriales dimensionales. El formato de sintaxis de la función es el siguiente:
traducir3d(tx,ty,tz)
La descripción del parámetro es la siguiente:
(1) tx: representa la distancia que se mueve el elemento en la dirección horizontal (eje X);
(2) ty: representa la distancia recorrida en la dirección vertical (eje Z) del elemento;
(3) tz: Indica la distancia que se mueve el elemento en el eje Z. No se pueden utilizar valores porcentuales para este parámetro.
2. traducirZ()
La función traducirZ() se utiliza para mover elementos a lo largo del eje Z del sistema de coordenadas tridimensional. El formato de sintaxis de la función es el siguiente:
traducirZ(tz);
El parámetro tz se utiliza para establecer la distancia que se mueve el elemento en el eje Z.
Consejo: traducirZ(tz); es equivalente a la abreviatura de traducir3d(0, 0, tz);.
3.rotar3d()
La función rotar3d() se utiliza para establecer el ángulo de rotación del elemento a lo largo del eje X, eje Y o eje Z. Esta función solo rotará el elemento a lo largo del eje fijo y no lo deformará. El formato de sintaxis de la función rotar3d() es el siguiente:
rotar3d(x,y,z,a)
La descripción del parámetro es la siguiente:
x: establece la coordenada del eje X del eje de rotación;
y: establece la coordenada del eje Y del eje de rotación;
z: establece la coordenada del eje Z del eje de rotación;
a: Establezca el ángulo de rotación del elemento. Un ángulo positivo significa rotación en el sentido de las agujas del reloj y un ángulo negativo significa rotación en el sentido contrario a las agujas del reloj.
4. escala3d()
La función scale3d() puede cambiar el tamaño (escalado) de los elementos. El formato de sintaxis de la función es el siguiente:
escala3d(sx,sy,sz)
La descripción del parámetro es la siguiente:
sx: representa la relación de escala del elemento en la dirección del eje X;
sy: representa la relación de escala del elemento en la dirección del eje Y;
sz: indica la relación de escala del elemento en la dirección del eje Z.
5.matriz3d()
La función Matrix3d() es muy similar a la función Matrix() que aprendimos antes, pero la función Matrix3d() puede usar una matriz de 4 × 4 para describir una transformación tridimensional (3D). Todas las operaciones de conversión 3D se pueden realizar al mismo tiempo a través de la función Matrix3D (). El formato de sintaxis de la función es el siguiente:
matriz3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
La descripción del parámetro es la siguiente:
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: se utiliza para describir varias transformaciones 3D;
a4, b4, c4: indica la cantidad de transformación del elemento.
Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1. 0><title>Documento</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*Deje que el subcuadro permanezca espacio 3d Entorno*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100%; color de fondo: rosa ;}.boxdiv:last-child{background-color:aquamarine;transform:rotateX(60deg);}</style></head><body><div><div><div></div><div> </div></div></div></body></html>Resultados de ejecución:
