Verwenden Sie CSS, um einen 3D-Fotowandeffekt zu erstellen
|
Verwenden Sie CSS, um eine 3D-Fotowand zu erstellen. Der spezifische Code lautet wie folgt: <!doctype html> <html> <Kopf> <meta charset="utf-8"> <title>Unbenanntes Dokument</title> </Kopf> <Text> <div> <img src="#"/> <img src="#"/> <img src="#"/> <img src="#"/> <img src="#"/> <img src="#"/> <img src="#"/> <img src="#"/> </div> </body> </html> Der obige Code dient der Vorbereitung. Setzen Sie im Body des HTML-Codes ein Div ein, welches die Fotos enthält, die Sie auf der Fotowand anzeigen möchten. Die Anzahl kann beliebig sein. Beginnen Sie dann mit dem Schreiben des Stils. Der obige Code legt einen ausreichend großen 3D-Betrachtungsabstand für die Fotowand fest, zumindest groß genug, um die Bewegungsbahn aller Bilder zu berücksichtigen. Der obige Code legt den Stil für jedes Bild fest und gibt dem Bild eine absolute Position, sodass seine Position beliebig gesteuert werden kann. Zu diesem Zeitpunkt überlappen sich die Bilder. Die Breite und Höhe hängen von der spezifischen Größe der Bilder in der Fotowand ab. Natürlich können Sie auch die Größe festlegen. 320 * 480 ist ein Beispiel, das ich gegeben habe.
img:nth-child(1){transform: translateZ(500px);}
img:nth-child(2){transform: translateZ(-500px);}
img:nth-child(3){transform:rotateY(45deg) translateZ(-500px);}
img:nth-child(4){transform:rotateY(45deg) translateZ(500px);}
img:nth-child(5){transform:rotateY(-45deg) translateZ(500px);}
img:nth-child(6){transform:rotateY(-45deg) translateZ(-500px);}
img:nth-child(7){transform:rotateY(90deg) translateZ(500px);}
img:nth-child(8){transform:rotateY(90deg) translateZ(-500px);}Der obige Code legt den Stil für jedes Bild separat fest, sodass sich jedes Bild um einen bestimmten Winkel um seine eigene Y-Achse dreht. Der Winkel hängt davon ab, wie viele Bilder Sie einfügen. Wenn es n Bilder gibt, wird jedes Bild nacheinander um 360/n Grad gedreht. Wenn ich hier beispielsweise 8 Bilder eingefügt habe, muss jedes Bild Schicht für Schicht um 360/8 = 45 Grad mehr als das vorherige Bild gedreht werden, beispielsweise 0 Grad, 45 Grad, 90 Grad, 135 Grad, 180 Grad, 225 Grad, 270 Grad, 315 Grad. Anschließend wird für jedes Bild eine positive (alle negativen Werte sind ebenfalls zulässig) gleich distanzierte Verschiebung zu seiner eigenen Z-Achse (die Z-Achsenrichtung jedes Bildes hat sich zu diesem Zeitpunkt geändert) eingestellt, um es auszubreiten. Der Effekt dessen, was ich hier schreibe, ist der gleiche. Eine Drehung um 45 Grad und eine Verschiebung um 500 Pixel ist tatsächlich dasselbe wie eine Drehung um 225 Grad und eine Verschiebung um 500 Pixel.
Draufsicht: Erst sich selbst drehen, dann in alle Richtungen ausbreiten. Sie müssen zuerst drehen, um die Richtung der Z-Achse zu ändern, bevor Sie sich bewegen. Andernfalls geschieht Folgendes:
Erst verschieben und dann drehen. Da beim ersten Verschieben die Z-Achsen aller Bilder in der Ausgangsrichtung liegen, werden alle Bilder ein Stück weit in die gleiche Richtung verschoben und überlappen sich trotzdem. Beim erneuten Drehen werden sie außerdem zusammengedrückt. Dann
div{margin:0 auto;margin-top:600px;
Transformationsstil: 3D bewahren;
Animation: Zhuan 6s linear unendlich; Höhe: 480px; Breite: 320px;}
@keyframes zhuan{
0 % {transform:rotateX(-15 Grad)rotateY(0);}
100 % {Transformation: RotiereX(-15 Grad) RotiereY(360 Grad);}
}Der letzte Schritt: Stellen Sie den Animationseffekt ein, bei dem das Div, das alle Bilder enthält, um die Anfangsposition gedreht wird, also rotateY (360 Grad). Beachten Sie, dass die Animation für das Div und nicht für das Bild eingestellt werden sollte, da es sonst zu einer „Rotation“ wird. Der Effekt, den wir brauchen, ist „Revolution“. Stellen Sie den Rand so ein, dass er zur einfacheren Betrachtung in der Mitte des Browsers angezeigt wird, stellen Sie die 3D-Perspektive ein und stellen Sie dann die Übergangszeit der Animation auf 6 s ein (die Rotationsgeschwindigkeit kann geändert werden) und stellen Sie dann „unendlich“ ein, damit es unendlich wiederholt wird. Zur einfacheren Betrachtung drehe ich das gesamte Div um -15 Grad um seine X-Achse. Rendern
Zusammenfassen Oben habe ich Ihnen die Verwendung von CSS zum Erstellen eines 3D-Fotowandeffekts vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: 32 typische spalten-/rasterbasierte Websites
>>: Einführung in Keyword-Design-Methoden im Webdesign
Artikel empfehlen
CSS HACK für IE6/IE7/IE8/IE9/FF (Zusammenfassung)
Seit ich die offizielle Version von IE8.0 install...
Zusammenfassung der wichtigsten Erkenntnisse des Vue-Entwicklungshandbuchs
Inhaltsverzeichnis Überblick 0. Grundlagen von Ja...
Detaillierte Erläuterung der SRIOV-Passthrough-Konfiguration und Leistungstests basierend auf KVM
SRIOV-Einführung, VF-Passthrough-Konfiguration un...
Detaillierte Erklärung des Typschutzes in TypeScript
Inhaltsverzeichnis Überblick Typzusicherungen in ...
Gogs+Jenkins+Docker automatisierte Bereitstellung von .NetCore-Schritten
Inhaltsverzeichnis Umgebungsbeschreibung Docker-I...
Analyse der Vorteile von Klassen gegenüber IDs beim Kommentieren von HTML-Elementen
Webseiten enthalten sehr komplexe HTML-Strukturen...
Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen
Inhaltsverzeichnis 1. Einleitung 2. Warum brauche...
MySQL 8.0.3 RC steht kurz vor der Veröffentlichung. Werfen wir einen Blick auf die Änderungen
MySQL 8.0.3 steht kurz vor der Veröffentlichung. ...
Gemeinsame MySQL-Indexwirksamkeitsbedingungen und Indexungültigkeitsbedingungen
Inhaltsverzeichnis 1. Bedingungen für das Versage...
Lösung für PHP, das nach Abschluss der Nginx-Installation nicht analysiert werden kann
Inhaltsverzeichnis Methode 1 Methode 2 Nach der I...
Kompilieren Sie CPP-Dateien mit G++ in Ubuntu
Als ich die CPP-Datei zum ersten Mal mit G++ komp...
Detaillierte Erklärung des Ungültigkeitsprozesses des VUE-Tokens
Inhaltsverzeichnis Ziel Gedankenanalyse Code-Land...
js fügt dynamisch Beispielcode für eine Liste eingekreister Zahlen hinzu
1. Fügen Sie zuerst das ul-Tag im Textkörper hinz...
Informationen zum Fallstrickprotokoll der Vue3-Übergangsanimation
Inhaltsverzeichnis Hintergrund Problemort Weitere...
Grundlegende Einführung in Echarts: Allgemeine Konfiguration von Balkendiagrammen und Liniendiagrammen
1Grundlegende Schritte von E-Charts Vier Schritte...