Kommentar: Ich habe einen Artikel über die Verwendung von CSS3 gelesen, um 3D -Tetraedronen zu erstellen. Ich fand es ziemlich gut, also nahm ich es heraus und teilte Ihnen mit, wie man Div+CSS verwendet, um Dreiecke zu erstellen. Hier werde ich zuerst den entsprechenden Code einfügen und Ihnen dann das Prinzip erläutern
Heute habe ich einen Artikel darüber gelesen, wie man CSS3 verwendet, um 3D -Tetraeder zu erstellen. Ich fand es ziemlich gut, also nahm ich es heraus und teilte es mit dir.Das erste, was ich mit Ihnen teilen möchte, ist, wie Sie Div+CSS verwenden, um Dreiecke zu erstellen. Hier füge ich zuerst den entsprechenden Code ein und erläutern Ihnen dann die Prinzipien.
HTML:
<div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#pyramid {
Position: Relativ;
Rand: 100px Auto;
Höhe: 500px;
Breite: 100px;
}
#pyramid> div {
Position: absolut;
Grenzstil: solide;
Grenzbreite: 200px 0 200px 346px;
}
#pyramid> div: nach {
Position: absolut;
Inhalt: "Dreieck";
Farbe: #ffff;
links: -250px;
Text-Align: Mitte;
}
#pyramid> div: First-Kind {
Grenzfarbe: #ff0000 transparent #ff0000 RGBA (50, 50, 50, 0,6);
}
</style>
Laufeffekt:
Prinzipanalyse:
Im HTML -Code definieren wir zwei Divs, das äußere Div ist ein Containerobjekt, und das innere Div wird verwendet, um Dreiecke zu erzeugen. Im CSS -Code setzen wir nicht die Breite und Höhe für die interne DIV, sondern nur die Breite der drei Ränder des Randes (oberes, unten und links). Durch das Festlegen verschiedener Farben für die drei Seiten werden sie zu drei verschiedenen Dreiecken.
Zu diesem Zeitpunkt müssen wir nur die Farben auf den oberen und unteren Seiten auf transparente Farben einstellen, und es wird ein gleichseitiges Dreieck erscheinen.
#pyramid> div: First-Kind {
Grenzfarben: transparente transparente transparente RGBA (50, 50, 50, 0,6);
}
Reproduktionsbild:
Unter den im roten Kreis gezeigten Ort befindet sich die interne DIV. Er ist ein unsichtbares Objekt mit 0 Breite und 0 Höhe, existiert aber tatsächlich.
Wir werden als nächstes darüber sprechen, wie Sie 3D -Tetraedronen implementieren und Animationen erstellen.
Fügen Sie zunächst den entsprechenden Code ein.
HTML:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS:
<style type = "text/css">
#pyramid {
Position: Relativ;
Rand: 100px Auto;
Höhe: 500px;
Breite: 100px;
-Webkit-Transform-Stil: Preserve-3d;
-Webkit-Animation: Spin 10s linear unendlich;
-Webkit-Transform-Origin: 116px 200px 116px;
-moz-transformiert: Preserve-3d;
-moz-Animation: Spin 10s linear unendlich;
-moz-transform-origin: 116px 200px 116px;
-MS-Transform-Stil: Preserve-3d;
-ms-Animation: Spin 10s linear unendlich;
-MS-Transform-Origin: 116px 200px 116px;
Transform-Stil: Preserve-3d;
Animation: Spin 10s Linear Infinite;
Transform-Origin: 116px 200px 116px;
}
@-webkit-keyframes spin {
aus {
-Webkit-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
Zu {
-Webkit-transform: rotatex (360 °) rotatey (360de) rotatez (360 °);
}
}
@-moz-keyframes spin {
aus {
-moz-transform: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
Zu {
-moz-transform: rotatex (360 °) rotatey (360 °) rotatez (360 °);
}
}
@-ms-keyframes spin {
aus {
-MS-Transformation: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
Zu {
-MS-Transformation: Rotatex (360 °) Drehung (360 °) Rotatez (360 °);
}
}
@keyframes spin {
aus {
Transformation: rotatex (0deg) rotatey (0deg) rotatez (0deg);
}
Zu {
Transformation: rotatex (360 °) Drehung (360 °) Rotatez (360 °);
}
}
#pyramid> div {
Position: absolut;
Grenzstil: solide;
Grenzbreite: 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: nach {
Position: absolut;
Inhalt: "Dreieck";
Farbe: #ffff;
links: -250px;
Text-Align: Mitte;
}
#pyramid> div: First-Kind {
Grenzfarben: transparente transparente transparente RGBA (50, 50, 50, 0,6);
-Webkit-transform: rotatey (-19.5de) rotatex (180 °) translatey (-400px);
-moz-transform: rotatey (-19.5de) rotatex (180 °) translatey (-400px);
-ms-transform: rotatey (-19.5de) rotatex (180 °) translatey (-400px);
Transformation: rotatey (-19,5 Grad) rotatex (180 °) Translatey (-400px);
}
#pyramid> div: n-Kind (2) {
Grenzfarben: transparente transparente transparente RGBA (50, 50, 50, 0,6);
-Webkit-transform: rotatey (90 °) rotatez (60 °) rotatex (180 °) translatey (-400px);
-moz-transform: rotatey (90 °) rotatez (60 °) rotatex (180 °) translatey (-400px);
-MS-Transformation: Drehatey (90 °) Rotatez (60 °) rotatex (180 °) Translatey (-400px);
Transformation: Rotatey (90 °) Drehung (60 °) rotatex (180 °) Translatey (-400px);
}
#pyramid> div: n-Kind (3) {
Grenzfarben: transparente transparente transparente RGBA (50, 50, 50, 0,9);
-Webkit-transform: rotatex (60 °) rotatey (19,5 Grad);
-moz-transform: rotatex (60 °) rotatey (19,5 Grad);
-ms-transform: rotatex (60 °) rotatey (19,5 Grad);
Transformation: rotatex (60 Grad) Rotatey (19,5 Grad);
}
#pyramid> div: n-Kind (4) {
Grenzfarben: transparente transparente transparente RGBA (50, 50, 50, 0,8);
-Webkit-transform: rotatex (-60de) rotatey (19,5-ass) translatex (-116px) translatey (-200px) translatez (326px);
-moz-transform: rotatex (-60deg) rotatey (19,5 Grad) translatex (-116px) translatey (-200px) translatez (326px);
-ms-transform: rotatex (-60de) rotatey (19,5deg) translatex (-116px) translatey (-200px) translatez (326px);
Transformation: rotatex (-60de) rotatey (19,5deg) translatex (-116px) translatey (-200px) translatez (326px);
}
</style>
Erklären Sie nun den entsprechenden Code.
Der HTML -Code ähnelt dem vorherigen, nämlich drei zusätzliche Divs, die als die anderen drei Seiten des Tetraeders verwendet werden.
Im CSS-Code verwenden wir #Pyramid> div: n-Kind (n), um die vier Gesichter des Trihedrons zu finden, die Farben der vier Seiten des Grenze zu setzen und sie in Dreiecke zu definieren. Setzen Sie ihren Winkel, ihre Ausrichtung und ihre Position im 3D -Raum durch die Methoden Dreh-, Dreh-, Translatex-, Translatey- und Translatez -Methoden des Transformattributs. Dies beinhaltet viel mathematisches Wissen, und jeder muss relevantes Wissen ergänzen.
Durch die obige Anordnung wird das Tetraeder gebildet. Als nächstes fügen Sie Animationseffekten hinzu. Die hier verwendeten Dinge sind auch sehr einfach, nämlich Animation und Keyframes. Sie können die Eigenschaften im Zusammenhang mit CSS3 auf der Website lernen, daher werde ich hier nicht zu viel erklären.
Zu diesem Zeitpunkt in diesem Artikel können Sie den HTML- und CSS -Code zusammenfügen, um den endgültigen Effekt anzuzeigen.
Der Code hat etwas, das Sie nicht verstehen, damit Sie mir eine Nachricht hinterlassen können.