Ausführliche Einführung zu Perspective

Heute zeige ich Ihnen einen mit CSS3 erstellten Flip-Effekt. Wenn Sie die Maus über ein Element bewegen, können Sie spüren, dass Sie die Informationen hinter dem Element sehen können. Wenn Sie Lianliankan machen, Pokerspiele, die Ihr Gedächtnis testen, oder sogar ein paar Worte an Ihre Freundin schreiben, können Sie es ausprobieren, nachdem Sie es in das Fotoalbum eingefügt haben, das mit diesem Beispiel erstellt wurde. ha~ Rendering: Einige im Beispiel verwendete CSS3 Neu Attribute: a. -webkit-perspective: 800px; perspective (Perspektive, Perspektive): Das Attribut definiert den Abstand des 3D-Elements von der Ansicht in Pixel. Mit dieser Eigenschaft können Sie die Ansicht des 3D-Elements ändern. Bestimmt, ob es sich bei dem, was Sie sehen, um eine 2D-Transformation oder eine 3D-Transformation handelt. b. -webkit-transform-style: Preserve-3d; Das Attribut transform-style gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden. Die Standardeinstellung ist flach, wir verwenden den 3D-Effekt und wählen dann 3D aus. c, -webkit-b

1. Empfohlener 3D-Flop-Effekt (Sammlung)

Einführung: Heute präsentiere ich Ihnen einen von CSS3 erstellten Flip-Effekt. Wenn Sie die Maus über ein Element bewegen, können Sie spüren, dass Sie die Informationen hinter dem Element sehen können. Wenn Sie Lianliankan machen, Pokerspiele, die Ihr Gedächtnis testen, oder sogar ein paar Worte an Ihre Freundin schreiben, können Sie es ausprobieren, nachdem Sie es in das Fotoalbum eingefügt haben, das mit diesem Beispiel erstellt wurde. ha~ Rendering: Einige im Beispiel verwendete CSS3 Neu Eigenschaften: a, -webkit-perspective: 800px; perspective (Perspektive, Perspektive): Eigenschaftsdefinition 3...

2 die technischen 3D-Schritte für die Konvertierung in CSS3

Einführung: Um mit dem 3D von CSS3 zu beginnen, müssen Sie Um mit CSS3 3D zu spielen, müssen Sie einige Wörter verstehen, nämlich Perspektive, Drehung und Übersetzung. Perspektive bedeutet, 2D-Dinge auf dem Bildschirm aus einer realistischen Perspektive zu betrachten, um den 3D-Effekt zu zeigen. Drehung ist keine Drehung mehr auf einer 2D-Ebene, sondern eine Drehung eines dreidimensionalen Koordinatensystems, einschließlich Drehung auf der X-Achse, Y-Achse und Z-Achse. Das Gleiche gilt für das Schwenken. Wenn ich es theoretisch erkläre, vermute ich natürlich, dass Sie es immer noch nicht verstehen. Unten finden Sie 3 GIFs: Drehen Sie sich entlang des Spielens mit den 3D-Effekten von CSS3

Einführung: Erste Schritte mit 3D von CSS3 Um mit 3D von CSS3 zu beginnen, müssen Sie nur ein paar Wörter verstehen, nämlich Perspektive, Drehen und Verschieben. Perspektive bedeutet, 2D-Dinge auf dem Bildschirm aus einer realistischen Perspektive zu betrachten, um den 3D-Effekt zu zeigen. Drehung ist keine Drehung mehr auf einer 2D-Ebene, sondern eine Drehung eines dreidimensionalen Koordinatensystems, einschließlich Drehung auf der X-Achse, Y-Achse und Z-Achse. Das Gleiche gilt für das Schwenken. Wenn ich es theoretisch erkläre, vermute ich natürlich, dass Sie es immer noch nicht verstehen. Unten finden Sie 3 GIFs: Drehen Sie entlang des klassischen CSS3-Gehäuses, spezielle 3D-Anzeige von Produktinformationen

Einführung: Verbessern Sie die Verwendung von Perspektive und transform:translateZ . Die herkömmliche Produktanzeige erregt möglicherweise nicht die Aufmerksamkeit des Benutzers, aber wenn Sie der Anzeige geeignete 3D-Elemente hinzufügen, ist der Effekt möglicherweise gut Ideen sollten von w3cplus stammen. Natürlich geht es darum, Ihnen beizubringen, wie es geht. Betrachten wir es als eine hohe Nachahmung ~ Zuerst zeigen wir Ihnen, wie Sie mit CSS3 einen Würfel erstellen: Kein CSS

5.

HTML5/Beispielcode für CSS3 thematisches 3D-Karusselleffektalbum

Einführung: Dieser Artikel Erläutert ausführlich den Standardwert des Perspektivattributs. Wenn er nicht vorhanden ist, bedeutet dies, dass das 3D-Objekt aus unendlich vielen Winkeln betrachtet wird, aber flach aussieht. Freunde, denen es gefällt, können mal reinschauen.

6. HTML5/CSS3-Spezialthema CSS3 erstellt einen klassischen Fall des 3D-Flip-Effekts von Baidu Tieba

Einführung: Zunächst einmal vielen Dank an den Lehrer von w3cfuns~ Heute werde ich Ihnen einen CSS3-Flop-Effekt vorstellen, bei dem Sie die Maus über das Element bewegen und das Gefühl haben, dass Sie die Informationen dahinter sehen können Element. Wenn Sie Lianliankan machen, Pokerspiele, die Ihr Gedächtnis testen, oder sogar ein paar Worte an Ihre Freundin schreiben, können Sie es ausprobieren, nachdem Sie es in das Fotoalbum eingefügt haben, das mit diesem Beispiel erstellt wurde. ha~ Rendering: Einige im Beispiel verwendete CSS3 Neu Attribute: a. -webkit-perspective: 800px; perspective

7

Einführung: Das Perspektive-Attribut und das zugehörige Perspektive-Ursprungs-Attribut werden verwendet, um den Abstand auf der Koordinatenachse in der 3D-Grafik zu steuern Im Folgenden erklären wir ausführlich, wie Sie den 3D-Transformationsabstand mithilfe des Perspektive-Attributs von CSS3 festlegen. Natürlich werden wir später auch auf die Verwendung von perspective-origin eingehen:

8.

HTML5 CSS3: Beispiel für 3D-Anzeige von Produktinformationen

Einführung: Verbessern Sie die Verwendung der Perspektive und transform:translateZ. Die herkömmliche Produktanzeige erregt möglicherweise nicht die Aufmerksamkeit des Benutzers, aber wenn Sie der Anzeige geeignete 3D-Elemente hinzufügen, ist der Effekt möglicherweise gut Ideen sollten von w3cplus stammen. Natürlich geht es darum, Ihnen beizubringen, wie es geht. Betrachten wir es als eine hohe Imitation. Lassen Sie uns zunächst einmal beibringen, wie es geht

9 >HTML5 CSS3: 3D-Karussell-Effekt-Album

Einführung: Der Zweck dieses Blogs ist der Aufbau von Baidu Tieba Basierend auf den attraktiven Beispielen von CSS3 im vorherigen HTML5-CSS3-Thema. Es gibt einen wichtigen Wissenspunkt über den CSS-3D-Effekt, der im 3D-Flip-Effekt nicht erwähnt wird, nämlich Perspektive und Übersetzungsdarstellungen: Hehe, ich habe ein paar Fotos vom College-Abschluss gemacht in ein Karussell, das sich um mein Hauptfach Geisteswissenschaften dreht, vergiss nie die nährende Anmut deiner Alma Mater~ 1. PerspektivePerspektive-Attributpaket

10. Bringe dir bei, wie um mit der SCC3 3D-Technologie zu spielen

Einführung: Um mit 3D in CSS3 zu spielen, müssen Sie einige verstehen Wörter, nämlich Perspektive, drehen und übersetzen. Perspektive bedeutet, 2D-Dinge auf dem Bildschirm aus einer realistischen Perspektive zu betrachten, um den 3D-Effekt zu zeigen. Drehung ist keine Drehung mehr auf einer 2D-Ebene, sondern eine Drehung eines dreidimensionalen Koordinatensystems, einschließlich Drehung auf der X-Achse, Y-Achse und Z-Achse. Das Gleiche gilt für das Schwenken.

【Verwandte Q&A-Empfehlung】:

css3 – Bleibt der perspektivische Ursprung nach dem Drehen des Elements das ursprüngliche Gesicht oder bleibt er unverändert? ?

ÜbersetzungZ und Perspektive im räumlichen Koordinatensystem erklären?

Javascript – Wie erhalte ich die transformierte Breite und Höhe nach rotationY

Wie konfiguriere ich das Hadoop-Plug-in in Eclipse Neon?

CSS - TranslateZ und Perspektive im räumlichen Koordinatensystem interpretieren?

Das obige ist der detaillierte Inhalt vonAusführliche Einführung zu Perspective. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!