3D -Start von CSS3
Um CSS3 von 3D zu spielen, müssen Sie mehrere Vokabeln verstehen, nämlich Perspektive, Rotation und Übersetzung. Perspektive bedeutet, 2D -Dinge auf dem Bildschirm aus einer realistischen Sicht zu betrachten, wodurch die Wirkung von 3D zeigt. Die Drehung ist keine Rotation mehr auf der 2D-Ebene, sondern eine Drehung eines dreidimensionalen Koordinatensystems, einschließlich X-Achse, Y-Achse und Z-Achse-Rotation. Gleiches gilt für die Übersetzung.
Verwenden Sie die Theorie, um zu veranschaulichen, wahrscheinlich nicht. Hier sind 3 GIFs:
Drehen Sie die X-Achse entlang
Drehen Sie entlang der Y -Achse
Drehen Sie entlang der Z -Achse
Es sollte kein Problem mit der Rotation geben, daher ist es einfacher, die Übersetzung zu verstehen, dh die X-Achse, die Y-Achse und die Z-Achse.
Sie können sagen, dass die Perspektive schwer zu verstehen ist. Lassen Sie mich mehrere Eigenschaften der Perspektive einführen.
Perspektive
Der englische Name der Perspektive ist Perspektive. Ohne dieses Ding gibt es keine Möglichkeit, einen 3D -Effekt zu bilden. Aber wie erlaubt dieses Ding unserem Browser, einen 3D -Effekt zu bilden? Sie können sich das Bild unten ansehen. Tatsächlich sollten diejenigen, die Malerei gelernt haben, die Perspektivbeziehung kennen, und dies ist der Grund.
Aber in CSS hat es numerische Werte. Was stellt beispielsweise 1000px dar? Wir können diese Weise verstehen, dass das Objekt, wenn wir direkt auf das Objekt schauen, überwältigend sein und unseren Blick besetzen. Unsere Entfernung davon wird immer kleiner und der dreidimensionale Sinn wird erscheinen. Tatsächlich konstruiert dieser Wert den Abstand zwischen unseren Augen und dem Bildschirm, der auch eine virtuelle 3D -Illusion erstellt.
Perspektiven-Ursprung
Aus dem obigen Verständnis verstehen wir die Perspektive und fügen hinzu, was dieser Ursprung ist. Der, den wir zuvor erwähnt haben, ist der Abstand vom Objekt, und dies ist die Sichtlinie der Augen. Die verschiedenen Positionen unseres Standpunkts bestimmen die verschiedenen Szenen, die wir sehen. Der Ausfall ist das Zentrum, das perspektivische Ursprung: 50% 50% ist. Der erste Wert ist die x-Achse, auf der das 3D-Element basiert, und die zweite Position wird auf der y-Achse definiert.
Bei der Definition eines Perspektiven-Origin-Attributs für ein Element erhalten seine untergeordneten Elemente Perspektiveffekte, nicht das Element selbst. Muss mit dem Perspektivattribut verwendet werden und beeinflusst nur 3D -Konvertierungselemente. (W3school)
Transformationstil
Die Perspektive ist wieder da. Ja, es ist der Schlüssel zu 3D in CSS. Das Transformationsstil ist standardmäßig flach. Wenn Sie den 3D-Effekt auf Elemente sehen möchten, müssen Sie das Transform-Stil verwenden: Preserve-3D, andernfalls handelt es sich nur um eine Ebene-Transformation, keine 3D-Transformation.
Nehmen Sie Schritt für Schritt mit CSS3-3D mit CSS3-3D spielen
Wir haben ein kleines Verständnis des obigen Konzepts. Beginnen wir also den tatsächlichen Kampf unten!
Schauen wir uns den Effekt an, ist es nicht cool? Besuchen Sie direkt https://bupt-hjm.github.io/css3-3d/. Wenn Sie denken, dass es in Ordnung ist, denken Sie daran, sie an Star HH zu geben
Schritt 1: HTML -Struktur
Ein sehr einfacher Behälter ist mit einer Stückkiste mit 6 Teilen eingewickelt
<div> <div> <div> </div> </div> </div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Schritt 2: Fügen Sie die erforderlichen 3D -Attribute hinzu, um die 3D -Welt einzutreten
Durch die obige Erklärung sollten Sie mit der Perspektive besser vertraut sein.
/* container*/.container {-webkit -perspektive: 1000px; -moz-perspektive: 1000px; -MS-Perspektive: 1000px; Perspektive: 1000px;}/*Stück Box*/ .piece-Box {Perspektiven-Origin: 50% 50%; -Webkit-Transform-Stil: Preserve-3d; -moz-transformiert: Preserve-3d; -MS-Transform-Stil: Preserve-3d; Transformationsstil: Preserve-3d;}Schritt 3: Fügen Sie die notwendigen Stile hinzu
/* container*/.container {-webkit -perspektive: 1000px; -moz-perspektive: 1000px; -MS-Perspektive: 1000px; Perspektive: 1000px;}/*Piece Box*/. Stück-Box {Position: Relativ; Breite: 200px; Höhe: 200px; Rand: 300px Auto; Perspektiven-Ursprung: 50% 50%; -Webkit-Transform-Stil: Preserve-3d; -moz-transformiert: Preserve-3d; -MS-Transform-Stil: Preserve-3d; Transformationsstil: Preserve-3D;}/*Stück Allgemeiner Stil*/. Stück {Position: absolut; Breite: 200px; Höhe: 200px; Hintergrund: Rot; Opazität: 0.5;}. piece-1 {Hintergrund: #ff6666;}. piece-2 {Hintergrund: #fff00;}. piece-3 {Hintergrund: #006699;}. piece-4 {Hintergrund: #009999;}. piep-5 {Hintergrund: #ff0033;}.Natürlich sehen Sie, nachdem Sie diesen Schritt abgeschlossen haben
Schritt 4: 3D -Transformationangriff
Das erste ist, die drehende Laterne zu erkennen. Wir sollten es nicht zuerst loslassen, den Lichtteil erkennen.
Wie kann man es erreichen? Denn um einen Kreis zu bilden, beträgt der Kreis 360 Grad und wir haben 6 Teile, es ist leicht zu glauben, dass wir jedes Stück in einem Inkrement von 60 Grad drehen müssen, und er wird wie folgt
Wie ziehe ich sie aus der Mitte?
Hier sollten wir auch beachten, dass nach dem Drehen des Elements um die y -Achse die x- und z -Achse tatsächlich dreht, sodass die vertikale Linie jeder Oberfläche des Würfels immer noch die Z -Achse ist. Wir müssen nur den Wert von TranslateZ ändern. Wenn Translatez positiv ist, gehen wir in unsere Richtung, damit wir es auseinander ziehen können.
Aber wie misst ich die Entfernung?
Ist es auf einen Blick klar?
Lassen Sie uns CSS ändern
.Piece-1 {Hintergrund: #ff6666; -Webkit-transform: rotatey (0deg) translatez (173,2px); -ms-transform: rotatey (0deg) translatez (173,2px); -O-transform: rotatey (0deg) translatez (173,2px); Transformation: rotatey (0deg) translatez (173.2px);}. piece-2 {Hintergrund: #fff00; -Webkit-transform: rotatey (60de) translatez (173,2px); -MS-Transformation: Rotatey (60 °) TranslateZ (173,2px); -O-Transformation: Rotatey (60 °) TranslateZ (173,2px); Transformation: rotatey (60de) translatez (173,2px);}. piece-3 {Hintergrund: #006699; -Webkit-transform: rotatey (120de) translatez (173,2px); -MS-Transformation: Drehatey (120DEG) TranslateZ (173,2px); -O-Transformation: Rotatey (120 °) TranslateZ (173,2px); -O-Transformation: Rotatey (120 °) TranslateZ (173,2px); Transformation: rotatey (120di) translatez (173,2px);}. piece-4 {Hintergrund: #009999; -Webkit-transform: rotatey (180de) translatez (173,2px); -MS-Transformation: Rotatey (180 °) TranslateZ (173,2px); -O-Transformation: Rotatey (180 °) translatez (173,2px); Transformation: rotatey (180de) TranslateZ (173,2px);}. piece-5 {Hintergrund: #ff0033; -Webkit-transform: rotatey (240de) translatez (173,2px); -MS-Transformation: Drehatey (240DEG) TranslateZ (173,2px); -O-Transformation: Drehatey (240DEG) TranslateZ (173,2px); Transformation: rotatey (240di) translatez (173,2px);}. piece-6 {Hintergrund: #ff6600; -Webkit-transform: rotatey (300 °) translatez (173,2px); -MS-Transformation: Rotatey (300 °) TranslateZ (173,2px); -O-Transformation: Rotatey (300 °) TranslateZ (173,2px); Transformation: Rotatey (300 °) TranslateZ (173,2px);}Wurde die drehende Laterne verwirklicht?
Schritt 5: Animation macht 3D bewegt
Um die sich bewegende Laterne zu erreichen, ist es tatsächlich sehr einfach. Wir müssen der Stückkiste nur eine Rotationsanimation hinzufügen. Vervollständigen Sie die Animation in 5 Sekunden und drehen Sie sich von 0 Grad auf 360 Grad
/*piece box*/. piece-box {Position: relativ; Breite: 200px; Höhe: 200px; Rand: 300px Auto; Perspektiven-Ursprung: 50% 50%; -Webkit-Transform-Stil: Preserve-3d; -moz-transformiert: Preserve-3d; -MS-Transform-Stil: Preserve-3d; Transform-Stil: Preserve-3d; Animation: Piecerotate 5S; -moz-Animation: Piecerotate 5S; / * Firefox */ -Webkit -Animation: Piecerotate 5S; / * Safari und Chrom */ -O -Animation: Piecerotate 5S; /*Opera*/}/*revolvierende Lampenanimation*/@keyframes priseTate {0% {-webkit-transform: rotatey (0deg); -ms-transform: rotatey (0deg); -O-transform: rotatey (0deg); Transformation: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: rotatey (360 °); -O-transform: rotatey (360 °); Transformation: rotatey (360deg);}}/ * Firefox */@-Moz-KeyFrames priseTate {0% {-webkit-transform: rotatey (0deg); -ms-transform: rotatey (0deg); -O-transform: rotatey (0deg); Transformation: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: rotatey (360 °); -O-transform: rotatey (360 °); Transformation: rotatey (360deg);}}/ * Safari und Chrome */@-webkit-keyframes priseTate {0% {-webkit-transform: rotatey (0deg); -ms-transform: rotatey (0deg); -O-transform: rotatey (0deg); Transformation: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: rotatey (360 °); -O-transform: rotatey (360 °); Transformation: rotatey (360deg);}}/ * Opera */@-O-KeyFrames priTerotate {0% {-webkit-transform: rotatey (0deg); -ms-transform: rotatey (0deg); -O-transform: rotatey (0deg); Transformation: rotatey (0deg);} 100% {-webkit-transform: rotatey (360deg); -ms-transform: rotatey (360 °); -O-transform: rotatey (360 °); Transformation: Rotatey (360 Grad);}}Ich werde hier keine GIFs setzen ~ Erreicht HHH coole Effekte? Es ist noch nicht vorbei ~ mehr coole Würfelbaugruppe
Es ist eigentlich nicht schwierig, einen Würfel zu implementieren. Ich werde hier nicht auf Details eingehen. Sie können sich zuerst ein Gesicht vorstellen und dann andere Gesichter erweitern, um es umzusetzen. Zum Beispiel setzen wir die Front TranslateZ (100px) des Würfels in der Nähe unserer 100px und dann übersetzt (-100px) und bewegen sie dann von unseren 100px. Links befindet sich translatex (-100px, dann rotatey (90 °), rechts ist translatex (100px) und dann rotatey (90 °). (90 Grad), solange wir es in die Animation schreiben, wird alles getan.
CSS ist wie folgt. Das Folgende ist nur das Stück1. Andere Leser können es selbst implementieren oder meinen GitHub -Quellcode betrachten
.Piece-1 {Hintergrund: #ff6666; -Webkit-transform: rotatey (0deg) translatez (173,2px); -ms-transform: rotatey (0deg) translatez (173,2px); -O-transform: rotatey (0deg) translatez (173,2px); Transformation: rotatey (0deg) translatez (173,2px); Animation: piece1Rotate 5s 5s; -moz-Animation: piece1rotate 5s 5s; / * Firefox */ -Webkit -Animation: piece1Rotate 5s 5s; / * Safari und Chrom */ -O -Animation: piece1Rotate 5s 5s; / * Opera */ -Webkit-Animation-Fill-Mode: Forwards; / * Chrome, Safari, Opera */ Animation-Fill-Mode: Forwards; }/*vorne*/ @keyframes piece1Rotate {0% {-webkit-transform: rotatey (0deg) translatez (173,2px); -ms-transform: rotatey (0deg) translatez (173,2px); -O-transform: rotatey (0deg) translatez (173,2px); Transformation: rotatey (0deg) translatez (173,2px);} 100% {-webkit-transform: rotatey (0deg) translatez (100px); -MS-Transformation: Rotatey (0deg) translatez (100px); -O-transform: rotatey (0deg) translatez (100px); Transformation: rotatey (0deg) translatez (100px);}} / * firefox * / @-moz-keyframes piece1Rotate {0% {-webkit-transform: rotatey (0deg) translatez (100px);}} / * firefox * / @-Moz-keyfracy-piepe1rotate1rotate {0% {--BOWSFORM: -Mozit-TRAMESPRAPIERUNG {0% {---WOBSFORM: --MOZIT-TRAMES1RAME1ROME1ROME1ROME1ROME1ROME1ROME1ROWS. rotatey (0deg) translatez (173,2px); -ms-transform: rotatey (0deg) translatez (173,2px); -O-transform: rotatey (0deg) translatez (173,2px); Transformation: rotatey (0deg) translatez (173,2px);} 100% {-webkit-transform: rotatey (0deg) translatez (100px); -MS-Transformation: Rotatey (0deg) translatez (100px); -O-transform: rotatey (0deg) translatez (100px); -O-transform: rotatey (0deg) translatez (100px); Transformation: Rotatey (0deg) TranslateZ (100px); Transformation: Rotatey (0deg) TranslateZ (100px); TranslateZ (100px);}} / * Safari und Chrome * / @-Webkit-keyframes piece1Rotate {0% {-webkit-transform: rotatey (0deg) translatez (173,2px); -ms-transform: rotatey (0deg) translatez (173,2px); -O-transform: rotatey (0deg) translatez (173,2px); Transformation: rotatey (0deg) translatez (173,2px);} 100% {-webkit-transform: rotatey (0deg) translatez (100px); -MS-Transformation: Rotatey (0deg) translatez (100px); -O-transform: rotatey (0deg) translatez (100px); Transformation: rotatey (0deg) translatez (100px);}} / * Opera * / @-o-keyframes piece1Rotate {0% {-webkit-transform: rotatey (0deg) translatez (173,2px); -ms-transform: rotatey (0deg) translatez (173,2px); -O-transform: rotatey (0deg) translatez (173,2px); -O-transform: rotatey (0deg) translatez (173,2px); Transformation: rotatey (0deg) translatez (173,2px);} 100% {-webkit-transform: rotatey (0deg) translatez (100px); -MS-Transformation: Rotatey (0deg) translatez (100px); -O-transform: rotatey (0deg) translatez (100px); -O-transform: rotatey (0deg) translatez (100px); Transformation: rotatey (0deg) translatez (100px);}}Sorgfältige Leser können feststellen, dass ich einen Animations-Fill-Mode verwendet habe: Forwards;, nämlich diese Stücke im endgültigen Animationseffekt, dh den Effekt des Würfels. Leser können es versuchen, ohne es zu versuchen, und es wird immer noch in seinen ursprünglichen Zustand wiederhergestellt.
Schließlich dreht sich der Würfel. In unserem Container vor der Animation wurde bereits Animation verwendet. Die Leser mögen denken, dass ich eine Klasse hinzufügen und ein Animaiton einsetzen kann. HHH, Animaiton wird die Front abdecken, und die Animation der vorderen Laterne wird verschwunden. In der HTML -Struktur fügte ich also ein weiteres Box -Wraping -Stück hinzu, wie folgt
<div> <div> <div><!--New container--> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div>
In der Animation können wir die Verzögerungszeit der Cube -Animation steuern, dh warten, bis die Cube -Montage abgeschlossen ist, bevor die Animation gestartet wird
Animation: Boxrotate 5S 10s Infinite; Die ersten 5S sind die Animationsdauer, die zweite 10 ist die Verzögerungszeit, und dann lassen wir den Würfel drehen, von 0 Grad bis 360 Grad um die x -Achse und auch von 0 bis 360 Grad um die Y -Achse.
.Piece-Box2 {-Webkit-Transform-Stil: Preserve-3d; -moz-transformiert: Preserve-3d; -MS-Transform-Stil: Preserve-3d; Transform-Stil: Preserve-3d; Animation: Boxrotate 5S 10s Infinite; -moz-Animation: Boxrotate 5S 10s Infinite; / * Firefox */ -Webkit -Animation: BoxRotate 5S 10s Infinite; / * Safari und Chrom */ -O -Animation: Boxrotate 5S 10s Infinite; /*Opera*/}/*Quader-Rotation-Animation*/@keyFrames boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0deg);); -ms-transform: rotatex (0deg) rotatey (0deg);); -O-transform: rotatex (0deg) rotatey (0deg););); Transformation: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360de) rotatey (360 °); -MS-Transformation: rotatex (360 °) rotatey (360 °); -O-Transformation: rotatex (360 °) rotatey (360 °); Transformation: 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););); Transformation: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360de) rotatey (360 °); -MS-Transformation: rotatex (360 °) rotatey (360 °); -O-Transformation: rotatex (360 °) rotatey (360 °); Transformation: rotatex (360di) rotatey (360deg);}}/ * safari und chrome */@-webkit-keyframes boxrotate {0% {-webkit-transform: rotatex (0deg) rotatey (0-gon););); -ms-transform: rotatex (0deg) rotatey (0deg);); -O-transform: rotatex (0deg) rotatey (0deg);); rotatex (0deg) rotatey (0deg);); Transformation: rotatex (0deg) rotatey (0deg););} 100% {-webkit-transform: rotatex (360de) rotatey (360de); -MS-Transformation: rotatex (360 °) rotatey (360 °); -O-Transformation: rotatex (360 °) rotatey (360 °); Transformation: rotatex (360deg) rotatey (360deg);}}/ * Opera */@-o-KeyFrames BoxRotate {0% {-webkit-transform: rotatex (0deg) rotatey (0n.);); -ms-transform: rotatex (0deg) rotatey (0deg);); -O-transform: rotatex (0deg) rotatey (0deg);); Transformation: rotatex (0deg) rotatey (0deg);););} 100% {-webkit-transform: rotatex (360de) rotatey (360 °); -MS-Transformation: rotatex (360 °) rotatey (360 °); -O-Transformation: rotatex (360 °) rotatey (360 °); Transformation: rotatex (360de) rotatey (360deg);}}Der endgültige Effekt ist abgeschlossen!
Die oben genannten sind Beispiele für die Implementierung von CSS 3D. Bedürftige Schüler können sich darauf beziehen. Vielen Dank für Ihre Unterstützung für diese Seite!