1. Coordenadas espaciales tridimensionales:
Antes del artículo, primero introduzca las coordenadas tridimensionales en el espacio, donde los ejes de coordenadas y las direcciones positivas y negativas se muestran en la figura:
2. El atributo de perspectiva indispensable
atributo de perspectiva: especifica el efecto de perspectiva de los elementos 3D y determina si los elementos de la página web se transforman en 2D o 3D. Si este atributo no está definido, no habrá efecto 3D.El punto de perspectiva de la transformación CSS 3D está frente al navegador., debe establecer el tamaño de la perspectiva del elemento o el elemento principal del elemento.
Dos formas de escribir la perspectiva:
1. Establecer el tamaño de la perspectiva en el elemento principal y luego escribir el atributo de transformación en el elemento secundario:
2. En el actual elemento, otros atributos de transformación se escriben juntos.
3.translate3d（x,y,z)
Translate3d (x, y, z) define la traducción 3D, donde x, y y z corresponden a la traducción del eje x, el eje y y el eje z, respectivamente.
O traducirX (x), traducirY (y), traducirZ (z).
Estilo inicial:
<style>
#father{
width:300px;
height: 300px;
margin:100px auto;
background-color: #0a6cd6;
}
#son{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
transform 3d
</div>
</div>
Traduce 200px a los ejes x, y y z:
Entre ellos, TranslateZ puede comprender mejor la posición de la perspectiva.
Tome TranslateZ como ejemplo a continuación para observar los cambios 3D del elemento: establezca la perspectiva del elemento principal en 1000 px: defina la distancia desde el punto de vista a la pantalla.
#father{
width:300px;
height: 300px;
margin:100px auto;
background-color: #0a6cd6;
perspective: 1000px; //定义视点离屏幕的距离
}
#son{
width: 200px;
height: 200px;
background-color: pink;
transform: translateZ(100px);//向z轴平移100px
}
Traducir 100 px al eje z Imagen de efecto:
Traducir 200 px al eje z Imagen de efecto: Traducir
400 px al eje z Imagen de efecto: Traducir
999 px al eje z Imagen de efecto:
Traducir 1000 px al eje z Imagen de efecto:
Sin la función del elemento rotar, solo traduceZ, que actúa para hacer que los elementos estén cerca o lejos frente a nuestros ojos.
en conclusión
1. Cuanto menor es el valor de TranslateZ, más pequeño es el elemento secundario, porque el elemento está lejos de nuestra vista y lo que vemos se vuelve más pequeño; cuanto mayor es el valor de TranslateZ, mayor es el elemento secundario .
2. Pero cuando está cerca de los 1000 px establecidos por el elemento principal, el tamaño del elemento secundario ocupará toda la pantalla;
3. Cuando el valor de TranslateZ es igual o mayor que 1000 px, el elemento será invisible.
4.rotate3d(x,y,z,ángulo)
turn3d(x,y,z,angle) define una rotación 3D, correspondiente a una rotación 3D a lo largo de los ejes x, y y z respectivamente. El valor de x, y y z es un valor entre 0 y 1, que se utiliza principalmente para describir el valor vectorial del elemento que gira alrededor de los ejes x, y y z respectivamente.
También puede ser rotarX (x), totalizar Y (y), rotar Z (z), donde x, y y z son ángulos.
ransform: perspective(1000px) rotate3d(0.5,0.5,0.5,30deg);
Representaciones:
(1) rotarX(ángulo) Rotación 3d alrededor del eje X:
rotación positiva de 30° alrededor del eje x 3d:
transform: perspective(1000px) rotateX(30deg)；
El diagrama de efecto de una rotación positiva de 30 ° alrededor del eje x 3d: (puede entenderse como: empujar hacia adentro)
rotación negativa de 30 ° alrededor del eje x 3d:
transform: perspective(1000px) rotateX(-30deg)；
La representación de una rotación negativa de 30° alrededor del eje x 3d: (puede entenderse como: tirar hacia afuera)
(2)rotarY(ángulo) gira 3d alrededor del eje y:
gira un valor positivo de 30° alrededor del eje y 3d:
transform: perspective(1000px) rotateY(30deg);
Representación de una rotación positiva de 30° alrededor del eje y 3d: (puede entenderse como: tracción lateral)
Una rotación 3D alrededor del eje y con un valor negativo de 30°:
transform: perspective(1000px) rotateY(-30deg);
Rotación 3d negativa de 30° alrededor del eje y: (puede entenderse como: empuje lateral)
(2)rotarZ(ángulo) Rotación 3d alrededor del eje z:
rotación positiva de 30° alrededor del eje z 3d:
transform: perspective(1000px) rotateZ(30deg);
La representación de una rotación positiva de 30° alrededor del eje z 3d:
una rotación negativa de 30° alrededor del eje z 3d:
transform: perspective(1000px) rotateZ(-30deg);
La representación de una rotación negativa de 30° alrededor del eje z 3d:
5.scale3d(x,y,z)
scale3d(x,y,z), scaleX(x), scaleY(y), scaleZ(z) definen la transformación de escala 3D, acercar cuando el valor > 1, alejar cuando el valor < 1, valor = 1 es el valor predeterminado
.
transform: perspective(1000px) scale3d(2,1.5,1.5);
Representaciones:
transform: perspective(1000px) scaleZ(2);
Diagrama de efectos:
scaleZ (z) por sí solo no tendrá ningún efecto y debe combinarse con otras funciones.
6.visibilidad de la cara posterior
La propiedad backface-visibility define si el elemento es visible cuando no está frente a la pantalla. Su valor está visible|oculto.
visible: La parte trasera es visible. oculto: la parte posterior no es visible.
Siete, atributo de estilo de transformación
Se utiliza para establecer si el subelemento del elemento está ubicado en el espacio 3D o en un plano.Parámetros
:
1.plano: valor predeterminado, que significa plano
2.preserve-3d: significa perspectiva 3D
8. atributo de origen de perspectiva
Establece la posición del punto base del elemento 3D. Al definir el atributo perspectiva-Origin, es un elemento hijo de un elemento, la perspectiva, en lugar del elemento en sí.
Formato de sintaxis: origen-perspectiva: eje x eje y
valor predeterminado: origen-perspectiva: 50% 50%;
