Inicio 3d de CSS3
Para tocar el 3D de CSS3, debes entender varios vocabulario, a saber, perspectiva, rotación y traducción. La perspectiva significa mirar cosas 2D en la pantalla desde una perspectiva realista, mostrando así el efecto de 3D. La rotación ya no es una rotación en el plano 2D, sino una rotación de un sistema de coordenadas tridimensional, que incluye el eje X, el eje y y la rotación del eje Z. Lo mismo ocurre con la traducción.
Por supuesto, usando la teoría para ilustrar, probablemente no lo entiendas. Aquí hay 3 gifs:
Girar a lo largo del eje X
Girar a lo largo del eje Y
Girar a lo largo del eje z
No debe haber ningún problema con la rotación, por lo que es más fácil entender la traducción, es decir, moverse en el eje X, el eje y y el eje z.
Puede decir que la perspectiva es difícil de entender. Permítanme introducir varios atributos de perspectiva.
perspectiva
El nombre de la perspectiva en inglés es la perspectiva. Sin esto, no hay forma de formar un efecto 3D. Pero, ¿cómo permite esto que nuestro navegador forme un efecto 3D? Puedes mirar la imagen a continuación. De hecho, aquellos que han aprendido la pintura deben conocer la relación perspectiva, y esta es la razón.
Pero en CSS tiene valores numéricos, por ejemplo, ¿qué representa 1000PX? Podemos entender de esta manera que si miramos directamente el objeto, el objeto será abrumador y ocupará nuestra vista. Nuestra distancia de él se está volviendo cada vez más pequeña, y aparecerá el sentido tridimensional. De hecho, este valor construye la distancia entre nuestros ojos y la pantalla, lo que también construye una ilusión virtual en 3D.
orígenes de la perspectiva
De lo anterior entendemos la perspectiva y agregamos cuál es este origen. El que mencionamos anteriormente es la distancia del objeto, y esta es la línea de visión de los ojos. Las diferentes posiciones de nuestro punto de vista determinan las diferentes escenas que vemos. El valor predeterminado es el centro, que es el origen de la perspectiva: 50% 50%. El primer valor es el eje X en el que se basa el elemento 3D, y la segunda posición se define en el eje y.
Al definir un atributo de origen de perspectiva para un elemento, sus elementos infantiles obtienen efectos de perspectiva, no el elemento en sí. Debe usarse con el atributo de perspectiva y solo afecta los elementos de conversión 3D. (W3School)
estilo transformador
La perspectiva está aquí de nuevo. Sí, es la clave para 3D en CSS. El estilo de transformación es plano de forma predeterminada. Si desea ver el efecto 3D en los elementos, debe usar Transform-Style: Preserve-3D, de lo contrario es solo una transformación de plano, no una transformación 3D.
Llevarte a jugar con CSS3-3d paso a paso
Tenemos una pequeña comprensión del concepto anterior, ¡así que comencemos el combate real a continuación!
Veamos el efecto, ¿no es genial? Visite directamente https://bupt-hjm.github.io/css3-3d/, si crees que está bien, recuerda darlo a Star HH
Paso 1: Estructura HTML
Un contenedor muy simple está envuelto con una caja de piezas que contiene 6 piezas
<VIV> <VIV> <VIV> </div> <div> </div> <div> </div> <div> </div> <div> <biv> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div>
Paso 2: Agregue los atributos 3D necesarios para ingresar al mundo 3D
A través de la explicación anterior, debe estar más familiarizado con la perspectiva.
/*Container*/.Container {-webkit -perpective: 1000px; -Moz-Perspectiva: 1000px; -Ms-Perspectiva: 1000px; Perspectiva: 1000px;}/*Piece Box*/ .Piece-Box {Perspective-Origin: 50% 50%; -WebKit-Transform-Style: Preserve-3D; -S-MOZ-Transform-Style: Preserve-3D; -Ms-Transform-Style: Preserve-3D; Estilo de transformación: Preserve-3D;}Paso 3: Agregar estilos necesarios
/*Container*/.Container {-webkit -perpective: 1000px; -Moz-Perspectiva: 1000px; -Ms-Perspectiva: 1000px; Perspectiva: 1000PX;}/*Piece Box*/. Piece-Box {posición: relativa; Ancho: 200px; Altura: 200px; Margen: 300px Auto; Perspective-Origin: 50% 50%; -WebKit-Transform-Style: Preserve-3D; -S-MOZ-Transform-Style: Preserve-3D; -Ms-Transform-Style: Preserve-3D; Transform-Style: Preserve-3D;}/*Piece General Style*/. Piece {Position: Absolute; Ancho: 200px; Altura: 200px; Antecedentes: rojo; Opacidad: 0.5;}. Piece-1 {Background: #FF66666;}. Piece-2 {Background: #FFF00;}. Piece-3 {Background: #006699;}. Piece-4 {Background: #009999;}. Piece-5 {fondo: #FF0033;}. Piece-6 {Background: #FF6600;Por supuesto, después de completar este paso, solo ves un cuadrado, que es nuestra pieza 6, porque nuestra transformación 3D aún no ha comenzado
Paso 4: Ataque de transformación 3D
Lo primero es realizar la linterna giratoria. No debemos dejarlo ir primero, darnos cuenta de la parte de luz.
¿Cómo lograrlo? Debido a que para formar un círculo, el círculo es de 360 grados y tenemos 6 piezas, entonces, es fácil pensar que necesitamos girar cada pieza en un incremento de 60 grados, y se convierte en la siguiente manera.
¿Cómo sacarlos del centro?
Aquí también debemos tener en cuenta que después de girar el elemento alrededor del eje Y, el eje x y z realmente girará, por lo que la línea vertical de cada cara del cubo sigue siendo el eje z. Solo necesitamos cambiar el valor de traducez. Cuando la traducción es positiva, caminamos en nuestra dirección, para que podamos separarlo.
¿Pero cómo medir la distancia?
¿Está claro a un vistazo?
Vamos a modificar CSS
.Piece-1 {Background: #FF6666; -Webkit-transform: Rotatey (0DEG) traducez (173.2px); -Ms-Transform: Rotatey (0deg) Traducez (173.2px); -o-transform: Rotatey (0deg) traducez (173.2px); transformación: rotatey (0deg) traducez (173.2px);}. Piece-2 {fondo: #fff00; -Webkit-transform: Rotatey (60deg) traducez (173.2px); -Ms-Transform: Rotatey (60deg) traducez (173.2px); -O-transform: Rotatey (60deg) traducez (173.2px); Transform: Rotatey (60deg) Tradatatez (173.2px);}. Piece-3 {Background: #006699; -Webkit-transform: Rotatey (120deg) traducez (173.2px); -Ms-Transform: Rotatey (120deg) traducez (173.2px); -O-transform: Rotatey (120deg) traducez (173.2px); -O-transform: Rotatey (120deg) traducez (173.2px); Transform: Rotatey (120deg) Tradatatez (173.2px);}. Piece-4 {fondo: #009999; -Webkit-transform: Rotatey (180deg) traducez (173.2px); -Ms-Transform: Rotatey (180deg) traducez (173.2px); -O-transform: Rotatey (180deg) traducez (173.2px); Transform: Rotatey (180deg) Tradatatez (173.2px);}. Piece-5 {fondo: #FF0033; -Webkit-transform: Rotatey (240deg) traducez (173.2px); -Ms-Transform: Rotatey (240deg) traducez (173.2px); -O-transform: Rotatey (240deg) traducez (173.2px); transformación: rotatey (240deg) traducez (173.2px);}. pieza-6 {fondo: #ff6600; -Webkit-transform: Rotatey (300deg) traducez (173.2px); -Ms-Transform: Rotatey (300deg) traducez (173.2px); -O-transform: Rotatey (300deg) traducez (173.2px); Transform: Rotatey (300deg) Traducez (173.2px);}¿Se ha realizado la linterna giratoria?
Paso 5: La animación hace un movimiento 3D
Para lograr la linterna en movimiento, en realidad es muy simple. Solo necesitamos agregar animación de rotación a la caja de piezas. Complete la animación en 5 segundos, gire de 0 grados a 360 grados
/*Piece Box*/. Piece-Box {Position: Relative; Ancho: 200px; Altura: 200px; Margen: 300px Auto; Perspective-Origin: 50% 50%; -WebKit-Transform-Style: Preserve-3D; -S-MOZ-Transform-Style: Preserve-3D; -Ms-Transform-Style: Preserve-3D; Estilo de transformación: Preserve-3D; Animación: Piecerotate 5s; -Moz-Animation: Piecerotate 5S; / * Firefox */ -Webkit -Animation: Piecerotate 5s; / * Safari y Chrome */ -o -Animation: Piecerotate 5s; /*Ópera*/}/*Animación de la lámpara giratoria*/@Keyframes PriteroTate {0% {-Webkit-Transform: RotateY (0DEG); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); transformación: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: Rotatey (360deg); -O-transform: Rotatey (360deg); Transform: Rotatey (360deg);}}/ * Firefox */@-Moz-Keyframes Piecerotate {0% {-webkit-Transform: Rotatey (0deg); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); transformación: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: Rotatey (360deg); -O-transform: Rotatey (360deg); transformación: rotatey (360deg);}}/ * safari y Chrome */@-webkit-keyframes Priterotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); transformación: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: Rotatey (360deg); -O-transform: Rotatey (360deg); transformación: rotatey (360deg);}}/ * ópera */@-o-keyframes Priterotate {0% {-webkit-Transform: Rotatey (0deg); -ms-transform: Rotatey (0deg); -o-transform: Rotatey (0deg); transformación: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: Rotatey (360deg); -O-transform: Rotatey (360deg); Transform: Rotatey (360deg);}}No pondré GIF aquí ~ ¿HHH logra efectos geniales? Aún no ha terminado ~ más ensamblaje de cubos
En realidad, no es difícil implementar un cubo. No entraré en detalles aquí. Primero puede imaginar una cara y luego expandir otras caras para implementarla. Por ejemplo, colocamos la traducción frontal (100px) del cubo cerca de nuestro 100px, y luego traducir (-100px) y luego alejarlo de nuestro 100px. On the left is translateX (-100px, then rotateY (90deg), on the right is translateX (100px) and then rotateY (90deg), on the top is translateY (-100px), rotateX (90deg), on the bottom is translateY (100px), rotateX (90deg), and on the bottom is translateY (100px), rotateX (90deg) Mientras lo escribamos en la animación, todo se hará.
CSS es el siguiente. La siguiente es solo la pieza1. Otros lectores pueden implementarlo por sí mismos o mirar mi código fuente de GitHub
.Piece-1 {Background: #FF6666; -Webkit-transform: Rotatey (0DEG) traducez (173.2px); -Ms-Transform: Rotatey (0deg) Traducez (173.2px); -o-transform: Rotatey (0deg) traducez (173.2px); transformación: rotatey (0deg) traducez (173.2px); Animación: Piece1Rotate 5S 5S; -Moz-Animation: Piece1rotate 5S 5S; / * Firefox */ -Webkit -Animation: Piece1rotate 5s 5s; / * Safari y Chrome */ -O -Animation: Piece1rotate 5S 5S; / * Ópera */ -Webkit-Animation-Fill-Mode: Forwards; / * Chrome, Safari, Opera */ Animation-Fill-Mode: Forwards; }/*front*/ @Keyframes Piece1rotate {0% {-Webkit-Transform: Rotatey (0DEG) TranslateZ (173.2px); -Ms-Transform: Rotatey (0deg) Traducez (173.2px); -o-transform: Rotatey (0deg) traducez (173.2px); transformación: rotatey (0deg) traducez (173.2px);} 100% {-webkit-transform: rotatey (0deg) traducez (100px); -Ms-Transform: Rotatey (0DEG) Traducez (100px); -o-transform: Rotatey (0deg) traducez (100px); transformación: rotatey (0deg) traducez (100px);}} / * firefox * / @-moz-keyframes piezas1rotate {0% {-webkit-transform: rotatey (0deg) traducez (100px);}} / * firefox * / @-moz--keyframes Piega1rotate {0% {-0% {-0% {-0% {-wee Rotatey (0deg) traducez (173.2px); -Ms-Transform: Rotatey (0deg) Traducez (173.2px); -o-transform: Rotatey (0deg) traducez (173.2px); transformación: rotatey (0deg) traducez (173.2px);} 100% {-webkit-transform: rotatey (0deg) traducez (100px); -Ms-Transform: Rotatey (0DEG) Traducez (100px); -o-transform: Rotatey (0deg) traducez (100px); -o-transform: Rotatey (0deg) traducez (100px); transformación: rotatey (0deg) traducez (100px); transformación: rotatey (0deg) traducez (100px); traducez (100px);}} / * safari y Chrome * / @-webkit-keyframes piezas1rotate {0% {-webkit-transform: rotatey (0deg) traducez (173.2px); -Ms-Transform: Rotatey (0deg) Traducez (173.2px); -o-transform: Rotatey (0deg) traducez (173.2px); transformación: rotatey (0deg) traducez (173.2px);} 100% {-webkit-transform: rotatey (0deg) traducez (100px); -Ms-Transform: Rotatey (0DEG) Traducez (100px); -o-transform: Rotatey (0deg) traducez (100px); Transform: rotatey (0deg) traducez (100px);}} / * ópera * / @-o-keyframes piezas1rotate {0% {-webkit-transform: rotatey (0deg) traducez (173.2px); -Ms-Transform: Rotatey (0deg) Traducez (173.2px); -o-transform: Rotatey (0deg) traducez (173.2px); -o-transform: Rotatey (0deg) traducez (173.2px); transformación: rotatey (0deg) traducez (173.2px);} 100% {-webkit-transform: rotatey (0deg) traducez (100px); -Ms-Transform: Rotatey (0DEG) Traducez (100px); -o-transform: Rotatey (0deg) traducez (100px); -o-transform: Rotatey (0deg) traducez (100px); transformar: rotatey (0deg) traducez (100px);}}Los lectores cuidadosos pueden encontrar que utilicé un modo de relleno de animación: hacia adelante;, que en realidad es para mantener estas piezas en el efecto de animación final, es decir, el efecto del cubo. Los lectores pueden probarlo sin intentarlo, y aún se restaurará a su estado original.
Finalmente, el cubo gira. Nuestro contenedor al frente ya ha usado animación. Los lectores pueden pensar que puedo agregar una clase y poner un animaiton. HHH, Animaiton cubrirá el frente, y la animación de la linterna delantera se habrá ido. Entonces, en la estructura HTML, agregué otra pieza de envoltura de caja, de la siguiente manera
<Viv> <Viv> <Viv> <!-nuevo contenedor-> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </biv> <biv>e
En la animación, podemos controlar el tiempo de retraso de la animación del cubo, es decir, esperar hasta que se complete el ensamblaje del cubo antes de comenzar la animación
Animación: BoxRotate 5S 10S Infinite; El primero 5S es la duración de la animación, el segundo 10 es el tiempo de retraso, y luego dejamos que el cubo gire, de 0 grados a 360 grados alrededor del eje x, y también de 0 a 360 grados alrededor de los eje Y.
.piece-box2 {-webkit-transform-style: Preserve-3d; -S-MOZ-Transform-Style: Preserve-3D; -Ms-Transform-Style: Preserve-3D; Estilo de transformación: Preserve-3D; Animación: BoxRotate 5S 10S Infinite; -Moz-Animation: BoxRotate 5S 10S Infinite; / * Firefox */ -Webkit -Animation: BoxRotate 5S 10S Infinite; / * Safari y cromo */ -o -animation: boxrotate 5s 10s infinito; /*Ópera*/}/*animación de rotación cuboid*/@keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -Ms-Transform: Rotatex (0deg) Rotatey (0deg);); -o-transform: Rotatex (0deg) Rotatey (0deg););); transformación: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -Ms-Transform: Rotatex (360deg) Rotatey (360deg); -O-transform: Rotatex (360deg) Rotatey (360deg); transformación: rotatex (360deg) Rotatey (360deg);}}/ * firefox */@-moz-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -Ms-Transform: Rotatex (0deg) Rotatey (0deg);); -o-transform: Rotatex (0deg) Rotatey (0deg););); transformación: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -Ms-Transform: Rotatex (360deg) Rotatey (360deg); -O-transform: Rotatex (360deg) Rotatey (360deg); transformación: rotatex (360deg) Rotatey (360deg);}}/ * safari y Chrome */@-webkit-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -Ms-Transform: Rotatex (0deg) Rotatey (0deg);); -o-transform: Rotatex (0deg) Rotatey (0deg);); rotatex (0deg) rotatey (0deg);); transformación: rotatex (0deg) rotatey (0deg););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -Ms-Transform: Rotatex (360deg) Rotatey (360deg); -O-transform: Rotatex (360deg) Rotatey (360deg); transformación: rotatex (360deg) Rotatey (360Deg);}}/ * ópera */@-o-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -Ms-Transform: Rotatex (0deg) Rotatey (0deg);); -o-transform: Rotatex (0deg) Rotatey (0deg);); transformación: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360deg) rotatey (360deg); -Ms-Transform: Rotatex (360deg) Rotatey (360deg); -O-transform: Rotatex (360deg) Rotatey (360deg); transformación: rotatex (360deg) Rotatey (360deg);}}¡El efecto final está completo!
Los anteriores son ejemplos de implementación de CSS 3D. Los estudiantes necesitados pueden referirse a él. ¡Gracias por su apoyo para este sitio!