CSS3 3D-Spezialeffekt-Videodatenfreigabe

CSS ist Cascading StyleSheet. Durch die Verwendung der Cascading-Stylesheet-Technologie bei der Erstellung von Webseiten kann effektiv eine präzisere Kontrolle über das Layout, Schriftarten, Farben, Hintergründe und andere Effekte der Seite erreicht werden.

CSS3 ist eine aktualisierte Version der CSS-Technologie, und die CSS3-Sprachentwicklung entwickelt sich in Richtung Modularisierung. Die bisherige Spezifikation war als Modul zu groß und komplex, daher wurde sie in kleinere Module zerlegt und weitere neue Module hinzugefügt. Zu diesen Modulen gehören: Boxmodell, Listenmodul, Hyperlink-Methode, Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout usw.

„CSS3 3D Special Effects Video Tutorial“ verwendet das Übergangsattribut, das Perspektivenattribut und das Transformationsattribut in CSS3, um echte und verwendbare dreidimensionale Effekte zu erstellen.

Video-Wiedergabeadresse: //m.sbmmt.com/course/416.html

Dies Schwierigkeiten beim Videolernen

1. Dreh- und Neigungsrichtung

Bei Rotations- und Neigungsänderungen ist die Standardtransformationsrichtung das Wichtigste.

Bei der Rotationstransformation wird standardmäßig eine Transformation im Uhrzeigersinn entlang der positiven Richtung der Referenzachse durchgeführt (bestimmt durch die verwendete Rotationsmethode, zum Beispiel: Die Referenzachse von rotateX() ist die X-Achse). Betrachten Sie die vom schwarzen Rand umgebene Ebene in der obigen Abbildung als ein Element mit der X-Achse als Referenzachse. Wenn das Element zu diesem Zeitpunkt um (+) 30 ° gedreht wird, wird die schwarze Ebene auf der X-Achse fixiert. Achse und die Y-Achse sind in positiver Richtung. Heben Sie eine Seite nach oben (genau wie beim Anheben eines Holzbretts liegt das angehobene Holzbrett immer noch in einer Ebene und verbiegt sich nicht wie beim Umdrehen eines Buches). Das Gleiche gilt für rotationY(). RotateZ() entspricht der Rotate()-Methode der 2D-Transformation, bei der das Element im Uhrzeigersinn gedreht wird.

rotatex

rotatey

rotatez

Bei der Neigungstransformation sind die Richtungen der X- und Y-Achse entgegengesetzt. skewX() neigt die vertikale Seite des Elements gegen den Uhrzeigersinn (d. h. nach links), während skewY() die horizontale Seite des Elements im Uhrzeigersinn (d. h. nach unten) neigt.

skewx

skewy

2. Transformationsbasispunkt, Blickpunkt und Betrachtungsabstand

Standardmäßig ist der Basispunkt der CSS3-Transformation der Mittelpunkt von Das heißt: Nach der Transformation (nur Drehung, Neigung und Skalierung) bleiben die Koordinaten des Elementmittelpunkts unverändert. Beispiel: Die Anfangsposition des Elements stimmt mit der oberen linken Ecke des Bildschirms überein und die Breite und Die Höhe beträgt beide 100 Pixel. Nach einer Drehung um 30° betragen die Koordinaten des Mittelpunkts des Elements immer noch (50,50).

Der Ansichtspunkt ist ein weiterer Basispunkt, der nur für die 3D-Transformation verwendet wird. Um die Perspektive zu verstehen, können Sie perspektivisches Denken nutzen. Wir alle sollten einen Eindruck von diesem Spiel haben: „Zwei parallele Geraden schneiden sich im Unendlichen.“ Es ist ursprünglich unmöglich, dass sich gerade Linien im dreidimensionalen Raum schneiden, selbst im Unendlichen. Bei der Projektion in das menschliche Auge nähern sich die ursprünglich parallelen Geraden jedoch aufgrund der „Perspektive“ immer weiter an, bis sie sich in einem Punkt schneiden „Phänomen.

Der Blickpunkt ist jedoch nicht der Schnittpunkt der Linien. Der Blickpunkt im obigen Bild liegt tatsächlich auf der äußersten Oberfläche der Ebene, also auf der Oberfläche, wo der mittlere Würfel nach außen eilt Bildschirm. Das Ansichtsprinzip von CSS ist dasselbe. Es simuliert lediglich, wie das menschliche Auge an einer bestimmten Position ist. Das heißt, es kann wie ein Würfel an verschiedenen Positionen im Bild oben sein Beim „Aussichtspunkt“ werden verschiedene Oberflächen angezeigt, die Menschen sehen können. Der „Aussichtspunkt“ ist ein Attribut, das zur Simulation dieser dreidimensionalen Darstellung von Elementen verwendet wird.

Und ein weiteres Merkmal, das erwähnt werden muss, ist die Sichtweite. Wie der Name schon sagt, ist der Betrachtungsabstand der Abstand eines Objekts vom Betrachtungspunkt. Nach dem Prinzip der „Perspektive“ erscheinen Objekte in der Nähe groß und in der Ferne klein, um das menschliche Auge zu blockieren. es wird sehr hell erscheinen, sogar unsichtbar. Das Perspektive-Attribut muss in Verbindung mit der Methode TranslateZ() „gefressen“ werden, um die Perspektive für das übergeordnete Element festzulegen und gleichzeitig die Methode TranslateZ() auf das untergeordnete Element anzuwenden, d. h. das übergeordnete Element wird verwendet um die Position des menschlichen Auges zu simulieren, und das untergeordnete Element ist das Objekt, das Sie sehen möchten. Wenn die Methode TranslateZ () nicht auf das untergeordnete Element angewendet wird, entspricht sie der Methode TranslateZ (0). Je näher der Übersetzungsabstand am Betrachtungsabstand liegt (nicht größer ist), desto größer ist das Element andernfalls erscheint das Element umso kleiner, je kleiner es ist. Das Funktionsprinzip der Perspektive besteht darin, die vom Element festgelegte Originalgröße als Größe des Elements im Betrachtungsabstand zu verwenden. Wenn Sie also den Abstand (+) verschieben, wird das Element größer, wenn Sie den Abstand (-) verschieben. ), wird das Element kleiner, muss aber nur gültig sein, wenn die Sichtweite festgelegt ist.

Darüber hinaus sehen Objekte in verschiedenen Positionen anders aus, wie in der perspektivischen Ansicht oben gezeigt. Wenn Sie diesen Effekt in CSS erzielen möchten, können Sie den Sichtabstand für das übergeordnete Element festlegen und dann Transformationen auf mehrere untergeordnete Elemente anwenden.

Das obige ist der detaillierte Inhalt vonCSS3 3D-Spezialeffekt-Videodatenfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!