Commentaire: J'ai lu un article sur la façon d'utiliser CSS3 pour créer des tétraèdres 3D. Je pensais que c'était assez bon, alors je l'ai retiré et j'ai partagé avec vous comment utiliser Div + CSS pour créer des triangles. Ici, je vais d'abord coller le code pertinent, puis vous expliquer le principe
Aujourd'hui, j'ai lu un article sur la façon d'utiliser CSS3 pour créer des tétraèdres 3D. Je pensais que c'était assez bon, alors je l'ai sorti et je l'ai partagé avec vous.La première chose que je veux partager avec vous est de savoir comment utiliser Div + CSS pour créer des triangles. Ici, je vais d'abord coller le code pertinent, puis vous expliquer les principes.
HTML:
<div>
<div> </div>
</div>
CSS:
<style type = "text / css">
#pyramid {
Position: relative;
marge: 100px auto;
hauteur: 500px;
Largeur: 100px;
}
#pyramid> div {
Position: absolue;
Style de la frontière: solide;
largeur de bordure: 200px 0 200px 346px;
}
#pyramid> div: après {
Position: absolue;
Contenu: "triangle";
Couleur: #ffff;
Gauche: -250px;
Texte-aligne: Centre;
}
#pyramid> div: premier-enfant {
Color à la frontière: # FF0000 transparent # FF0000 RGBA (50, 50, 50, 0,6);
}
</ style>
Effet de course:
Analyse principale:
Dans le code HTML, nous définissons deux divs, la div externe est un objet de conteneur et le div intérieur est utilisé pour générer des triangles. Dans le code CSS, nous ne définissons pas la largeur et la hauteur de la div interne, mais ne définissons que la largeur des trois bords de la frontière (supérieur, bas et gauche). En fixant différentes couleurs pour les trois côtés, ils deviendront respectivement trois triangles différents.
Pour le moment, nous devons simplement régler les couleurs sur les côtés supérieurs et inférieurs aux couleurs transparentes, et un triangle équilatéral apparaîtra.
#pyramid> div: premier-enfant {
Color frontière: RGBA transparent transparent transparent (50, 50, 50, 0,6);
}
Image de reproduction:
Parmi eux, l'endroit montré dans le cercle rouge est l'endroit où se trouve la div interne. Il est un objet invisible avec 0 largeur et 0 hauteur, mais existe en fait.
Ce que nous allons parler ensuite, c'est de savoir comment implémenter les tétraèdres 3D et comment créer des animations.
Bénérez d'abord le code pertinent.
HTML:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS:
<style type = "text / css">
#pyramid {
Position: relative;
marge: 100px auto;
hauteur: 500px;
Largeur: 100px;
-Webkit-Transform-style: Preserve-3d;
-Webkit-animation: Spin 10s linéaire infini;
-Webkit-Transform-Origin: 116px 200px 116px;
-Moz-Transform-style: Preserve-3d;
-moz-animation: Spin 10s linéaire infini;
-Moz-transform-original: 116px 200px 116px;
-mS-transform-style: Preserve-3d;
-ms-animation: Spin 10s linéaire infini;
-ms-transform-original: 116px 200px 116px;
style transform: Preserve-3d;
Animation: Spin 10s Linear Infinite;
Transform-Origin: 116px 200px 116px;
}
@ -webkit-keyframes spin {
depuis {
-Webkit-transform: Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);
}
à {
-Webkit-Transform: Rotatex (360Deg) Rotatey (360DEG) Rotatez (360Deg);
}
}
@ -moz-keyframes spin {
depuis {
-moz-transform: Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);
}
à {
-Moz-transform: Rotatex (360Deg) Rotatey (360Deg) Rotatez (360Deg);
}
}
@ -ms-keyframes spin {
depuis {
-ms-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
à {
-ms-transform: Rotatex (360Deg) Rotatey (360Deg) Rotatez (360Deg);
}
}
@keyframes spin {
depuis {
Transformer: Rotatex (0Deg) Rotatey (0deg) Rotatez (0deg);
}
à {
Transformer: Rotatex (360Deg) Rotatey (360Deg) Rotatez (360Deg);
}
}
#pyramid> div {
Position: absolue;
Style de la frontière: solide;
largeur de bordure: 200px 0 200px 346px;
-Webkit-Transform-Origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
Transform-Origin: 0 0;
}
#pyramid> div: après {
Position: absolue;
Contenu: "triangle";
Couleur: #ffff;
Gauche: -250px;
Texte-aligne: Centre;
}
#pyramid> div: premier-enfant {
Color frontière: RGBA transparent transparent transparent (50, 50, 50, 0,6);
-Webkit-Transform: Rotatey (-19.5deg) Rotatex (180Deg) Translatey (-400px);
-moz-transform: Rotatey (-19.5deg) Rotatex (180Deg) Translatey (-400px);
-ms-transform: Rotatey (-19.5deg) Rotatex (180DEG) Translatey (-400px);
transformée: Rotatey (-19.5Deg) Rotatex (180Deg) Translatey (-400px);
}
#pyramid> div: nth-child (2) {
Color frontière: RGBA transparent transparent transparent (50, 50, 50, 0,6);
-Webkit-Transform: Rotatey (90Deg) Rotatez (60Deg) Rotatex (180Deg) Translatey (-400px);
-Moz-transform: Rotatey (90Deg) Rotatez (60Deg) Rotatex (180deg) tradingy (-400px);
-ms-transform: Rotatey (90Deg) Rotatez (60Deg) Rotatex (180Deg) Translatey (-400px);
Transformer: Rotatey (90Deg) Rotatez (60Deg) Rotatex (180Deg) Translatey (-400px);
}
#pyramid> div: nth-child (3) {
Color frontière: RGBA transparent transparent transparent (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);
Transformer: Rotatex (60deg) Rotatey (19.5deg);
}
#pyramid> div: nth-child (4) {
Color frontière: RGBA transparent transparent transparent (50, 50, 50, 0,8);
-Webkit-Transform: Rotatex (-60Deg) Rotatey (19.5Deg) Translatex (-116px) Translatey (-200px) Translatez (326px);
-moz-transform: rotatex (-60deg) rotatey (19.5deg) translatex (-116px) translatey (-200px) tradlatez (326px);
-ms-transform: Rotatex (-60Deg) Rotatey (19.5DEG) Translatex (-116px) Translatey (-200px) Translatez (326px);
Transform: Rotatex (-60Deg) Rotatey (19.5Deg) Translatex (-116px) Translatey (-200px) Translatez (326px);
}
</ style>
Maintenant, commencez à expliquer le code pertinent.
Le code HTML est similaire à celui précédent, à savoir qu'il existe trois div supplémentaires, qui sont utilisés comme les trois autres côtés du tétraèdre.
Dans le code CSS, nous utilisons #pyramid> div: nth-child (n) pour trouver les quatre faces du trièdre, définir les couleurs des quatre côtés de la frontière et les définir respectivement en triangles. Réglez leur angle, leur orientation et leur position dans l'espace 3D via les méthodes Rotatex, Rotatey, Translatex, Translatey et Translatez de l'attribut de transformation. Cela implique beaucoup de connaissances mathématiques et tout le monde doit compléter les connaissances pertinentes.
Grâce à la disposition ci-dessus, le tétraèdre se forme. Vient ensuite pour y ajouter des effets d'animation. Les choses utilisées ici sont également très simples, à savoir l'animation et les images clés. Vous pouvez apprendre les propriétés liées à CSS3 sur le site, donc je n'expliquerai pas trop ici.
À ce stade de cet article, vous pouvez coller le code HTML et CSS ensemble pour voir l'effet final.
Il y a quelque chose dans le code que vous ne comprenez pas, vous pouvez donc me laisser un message.