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
Detaillierte Schritte zum Speichern von Emoji-Ausdrücken in MySQL
Verursacht durch: java.sql.SQLException: Falscher...
CSS3-Implementierungscode für den kreisförmigen Fortschritts-Tick-Effekt
Inhaltsverzeichnis 8. Kreisförmiger Fortschritts-...
Detailliertes Tutorial zur Installation von Docker auf CentOS 8
1. Frühere Versionen yum entfernen Docker Docker-...
Vue realisiert Bildwechseleffekt
In diesem Artikelbeispiel wird der spezifische Co...
So ändern Sie das MySQL-Passwort auf dem XAMPP-Server (mit Bildern)
Heute habe ich bei der Arbeit an PHP herausgefund...
Verstehen Sie alle Aspekte von HTTP-Headern mit Bildern und Text
Was sind HTTP-Header HTTP ist eine Abkürzung für ...
Datendiebstahl mit CSS in Firefox
0x00 Einführung Vor einigen Monaten habe ich eine...
So ändern Sie Port 3389 des Remotedesktops von Windows Server 2008 R2
Die Standardportnummer des Remotedesktops des Win...
Detaillierte Erläuterung der Verwendung von Redux bei der nativen WeChat-Applet-Entwicklung
Prämisse In komplexen Szenarien müssen große Date...
So rufen Sie das VMware Esxi-Root-Passwort erfolgreich ab, wenn Sie es vergessen haben
Bereiten Sie eine CentOS6-Installationsdiskette (...
Detaillierte Einführung in den HTML-Head-Tag
Der HTML-Kopfteil enthält viele Tags und Elemente,...
Detaillierte Erläuterung des Downloadvorgangs des Pakets mysql-connector-java.jar
Laden Sie das Tutorial zum Paket mysql-connector-...
Detaillierte Erklärung der MySQL-Injektion ohne Kenntnis des Spaltennamens
Vorwort Ich habe in letzter Zeit das Gefühl, dass...
MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045
MySQL-Passwort ist korrekt, aber keine lokale Anm...
Zusammenfassung von 6 Lösungen zur Implementierung des Singleton-Modus in JS
Vorwort Heute habe ich das Erzeugungsmuster im En...