CSS3 3D Transformación

CSS3 3La función de transformación D permite3Elementos transformados en el espacio D.

del elemento3D transformación

Se utiliza CSS3 3La función de transformación D permite realizar operaciones básicas de transformación en elementos del espacio tridimensional, como mover, girar, escalar y inclinar.

Los elementos transformados no afectan a los elementos circundantes, pero pueden superponerse como elementos de posición absoluta. Sin embargo, los elementos transformados aún ocuparán espacio en el diseño en su posición predeterminada (sin transformación).

Se utiliza la función de transformación Transform() y CSS

CSS3 El atributo transform se utiliza para manipular el sistema de coordenadas utilizado por los elementos para aplicar efectos de transformación.

La siguiente parte describe3Función de transformación D:

translate3d() función

rotación3La función d() realiza3Los elementos en el espacio D se rotan alrededor del vector de dirección [x, y, z] en un ángulo especificado como punto. Esto se puede escribir como rotate(vx, vy, vz, angle).

ejemplo

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px sólido #e5a043;
　　　　fondo: #fff2dd;
}
.transformed {
　　　　-webkit-transform: traducir3d(25px,　25px,　50px);　/*　Chrome, Safari, Opera　*/
　　　　transform: traducir3d(25px,　25px,　50px);　
}

esta función translate3d(25px, 25px, 5Mover la imagen en la dirección positiva del eje X e Y25个像素，并沿Z轴正方向移动5píxeles, y se mueve en la dirección positiva del eje Z

3píxeles.

D transformación utiliza el sistema de coordenadas tridimensional, pero el movimiento a lo largo del eje Z no siempre es obvio, porque estos elementos existen en un plano bidimensional (plano) y no tienen profundidad.-la propiedad CSS origin agrega profundidad a la escena. Al hacer que los elementos más altos en el eje Z (es decir, los elementos más cercanos al observador) parezcan más grandes y los elementos más lejanos al observador parezcan más pequeños, se puede usar perspective y perspective

rotate3d() función

esta rotate3d() función gira el elemento en el vector direccional [x, y, z]3D espacio de los elementos gira el ángulo especificado. Puede escribirse como rotate(vx, vy, vz, angle).

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px sólido #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: girar3d(0,　1, 0,　6, 0grados);　/*　Chrome, Safari, Opera　*/
　　　　transform: girar3d(0,　1, 0,　6, 0grados);　
}

esta función rotate3d(0, 1, 0, 6, 0grados) girar la imagen en el eje Y6grados. También puede usar valores negativos para girar el elemento en la dirección opuesta.

scale3d() función

scale3d() función cambia el tamaño del elemento. Puede escribirse como scale(sx, sy, sz). A menos que se combine con otras funciones de transformación como rotación y perspectiva, el efecto de esta función no es obvio, como se muestra en el siguiente ejemplo.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px sólido #6486ab;
　　　　background: #e9eef3;
}
.transformed {
　　　　-webkit-transform: escalado3d(1,　1,　2) girar3d(1, 0, 0,　6, 0grados);　/*　Chrome, Safari, Opera　*/
　　　　transform: escalado3d(1,　1,　2) girar3d(1, 0, 0,　6, 0grados);　
}

función scale3d(1, 1, 2) ampliar el elemento en el eje Z, función rotate3d(1, 0, 0, 6, 0, 0, 0grados) girar la imagen en el eje X60 grados.

matriz3d() función

matriz3d() función puede ejecutar todas3D transformación, por ejemplo, desplazamiento, rotación y escalado. Adopta4×4transformaciónmatrizen forma de16parámetros.

esto es con matriz3d() función ejecuta3Ejemplo de D transformación.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px sólido #d14e46;
　　　　background: #fddddb;
}
.transformed {
　　　　-webkit-transform: matriz3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　/*　Chrome, Safari, Opera　*/
　　　　transform: matriz3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　
}

pero, cuando se ejecutan varias transformaciones a la vez, es más conveniente usar una función de transformación única y listarlas en orden, como se muestra a continuación:

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px sólido #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: traducir3d(0,　0,)　60px) Girar3d(0,　1, 0,　-60grados) Escala3d(1,　1,　2);　/*　Chrome, Safari, Opera　*/
　　　　transform: traducir3d(0,　0,)　60px) Girar3d(0,　1, 0,　-60grados) Escala3d(1,　1,　2);　
}

3Funciones de transformación D

La siguiente tabla resume brevemente todas3Función de transformación D.