Comentario: Leí un artículo sobre cómo usar CSS3 para crear tetrahedrons 3D. Pensé que era bastante bueno, así que lo saqué y compartí contigo cómo usar Div+CSS para crear triángulos. Aquí primero pegaré el código relevante y luego le explicaré el principio
Hoy leí un artículo sobre cómo usar CSS3 para crear tetrahedrons 3D. Pensé que era bastante bueno, así que lo saqué y lo compartí contigo.Lo primero que quiero compartir con ustedes es cómo usar Div+CSS para crear triángulos. Aquí primero pegaré el código relevante y luego le explicaré los principios.
HTML:
<div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#Pyramid {
Posición: relativo;
Margen: 100px Auto;
Altura: 500px;
Ancho: 100px;
}
#gyramid> div {
Posición: Absoluto;
estilo fronterizo: sólido;
ancho de la frontera: 200px 0 200px 346px;
}
#pyramid> div: después {
Posición: Absoluto;
Contenido: "Triángulo";
Color: #ffff;
Izquierda: -250px;
Text-Align: Center;
}
#Pyramid> Div: First-Child {
color de borde: #FF0000 Transparente #FF0000 RGBA (50, 50, 50, 0.6);
}
</style>
Efecto de ejecución:
Análisis principal:
En el código HTML, definimos dos divs, el DIV externo es un objeto de contenedor y el DIV interno se usa para generar triángulos. En el código CSS, no establecemos el ancho y la altura para el DIV interno, sino que solo establecemos el ancho de los tres bordes del borde (superior, hacia abajo e izquierda). Al establecer diferentes colores para los tres lados, se convertirán en tres triángulos diferentes respectivamente.
En este momento, simplemente necesitamos configurar los colores en los lados superior e inferior a colores transparentes, y aparecerá un triángulo equilibrado.
#Pyramid> Div: First-Child {
color de borde: transparente transparente transparente transparente RGBA (50, 50, 50, 0.6);
}
Imagen de reproducción:
Entre ellos, el lugar que se muestra en el círculo rojo es donde se encuentra el DIV interno. Es un objeto invisible con 0 ancho y 0 altura, pero en realidad existe.
Lo que hablaremos a continuación es cómo implementar tetrahedrons 3D y cómo crear animaciones.
Primero, pegue el código relevante.
HTML:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#Pyramid {
Posición: relativo;
Margen: 100px Auto;
Altura: 500px;
Ancho: 100px;
-WebKit-Transform-Style: Preserve-3D;
-WebKit-Animation: Spin 10s lineal infinito;
-WebKit-Transform-Origin: 116px 200px 116px;
-S-MOZ-Transform-Style: Preserve-3D;
-Moz-Animation: Spin 10s lineal infinito;
-Moz-Transform-Origin: 116px 200px 116px;
-Ms-Transform-Style: Preserve-3D;
-Ms-Animation: Spin 10s lineal infinito;
-Ms-Transform-Origin: 116px 200px 116px;
Estilo de transformación: Preserve-3D;
Animación: Spin 10s Lineal Infinite;
Originato de transformación: 116px 200px 116px;
}
@-webkit-keyframes spin {
de {
-WebKit-Transform: Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);
}
a {
-WebKit-Transform: RotateX (360deg) Rotatey (360deg) Rotatez (360deg);
}
}
@-Moz-Keyframes Spin {
de {
-Moz-Transform: Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);
}
a {
-Moz-Transform: Rotatex (360deg) Rotatey (360deg) Rotatez (360deg);
}
}
@-ms-keyframes spin {
de {
-ms-transform: rotatex (0deg) Rotatey (0deg) Rotatez (0deg);
}
a {
-Ms-Transform: Rotatex (360deg) Rotatey (360deg) Rotatez (360deg);
}
}
@Keyframes Spin {
de {
transformación: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
a {
transformación: rotatex (360deg) Rotatey (360deg) Rotatez (360deg);
}
}
#gyramid> div {
Posición: Absoluto;
estilo fronterizo: sólido;
ancho de la frontera: 200px 0 200px 346px;
-webkit-transform-origin: 0 0;
-Moz-Transform-Origin: 0 0;
-Ms-Transform-Origin: 0 0;
transformación de origen: 0 0;
}
#pyramid> div: después {
Posición: Absoluto;
Contenido: "Triángulo";
Color: #ffff;
Izquierda: -250px;
Text-Align: Center;
}
#Pyramid> Div: First-Child {
color de borde: transparente transparente transparente transparente RGBA (50, 50, 50, 0.6);
-webkit-transform: Rotatey (-19.5deg) Rotatex (180deg) Traducy (-400px);
-Moz-Transform: Rotatey (-19.5deg) Rotatex (180deg) Traducy (-400px);
-Ms-Transform: Rotatey (-19.5deg) Rotatex (180deg) Traducy (-400px);
Transformación: Rotatey (-19.5deg) Rotatex (180deg) Traducy (-400px);
}
#pyramid> div: nth-child (2) {
color de borde: transparente transparente transparente transparente RGBA (50, 50, 50, 0.6);
-WebKit-Transform: Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Traducy (-400px);
-Moz-Transform: Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Traducy (-400px);
-Ms-Transform: Rotatey (90deg) Rotatez (60deg) Rotatex (180deg) Traducy (-400px);
transformación: rotatey (90deg) Rotatez (60deg) Rotatex (180deg) traducey (-400px);
}
#pyramid> div: nth-child (3) {
color de borde: transparente transparente transparente transparente RGBA (50, 50, 50, 0.9);
-Webkit-transform: Rotatex (60deg) Rotatey (19.5deg);
-Moz-Transform: Rotatex (60deg) Rotatey (19.5deg);
-Ms-Transform: Rotatex (60deg) Rotatey (19.5deg);
transformación: rotatex (60deg) Rotatey (19.5deg);
}
#pyramid> div: nth-child (4) {
color de borde: transparente transparente transparente transparente RGBA (50, 50, 50, 0.8);
-webkit-transform: rotatex (-60deg) Rotatey (19.5deg) traduceX (-116px) traducey (-200px) traducez (326px);
-Moz-Transform: Rotatex (-60deg) Rotatey (19.5deg) traducex (-116px) traducey (-200px) traducez (326px);
-Ms-Transform: Rotatex (-60deg) Rotatey (19.5deg) traduceX (-116px) traducey (-200px) traducez (326px);
transformación: rotatex (-60deg) rotatey (19.5deg) traducex (-116px) traducey (-200px) traducez (326px);
}
</style>
Ahora comience a explicar el código relevante.
El código HTML es similar al anterior, que es que hay tres divs adicionales, que se utilizan como los otros tres lados del tetraedro.
En el código CSS, usamos #Pyramid> Div: Nth-Child (N) para encontrar las cuatro caras del trihédico, colocamos los colores de los cuatro lados del borde y las definirá en triángulos respectivamente. Establezca su ángulo, orientación y posición en el espacio 3D a través de los métodos Rotatex, Rotatey, TraducEX, Translatey y Traducez del atributo de transformación. Esto implica mucho conocimiento matemático, y todos necesitan complementar el conocimiento relevante.
A través de la disposición anterior, se forma el tetraedro. Lo siguiente es agregarle efectos de animación. Las cosas utilizadas aquí también son muy simples, a saber, animación y fotogramas clave. Puede aprender las propiedades relacionadas con CSS3 en el sitio, por lo que no explicaré demasiado aquí.
En este punto de este artículo, puede pegar el código HTML y CSS juntos para ver el efecto final.
Hay algo en el código que no entiende, por lo que puede dejarme un mensaje.