Gibt es in CSS3 einen negativen Wert für die Z-Achse der dreidimensionalen Ebene?

Die Z-Achse der dreidimensionalen Ebene in CSS3 hat einen negativen Wert. Im dreidimensionalen Koordinatensystem ist der Wert der Z-Achse zur Außenseite des Bildschirms positiv, und der Wert zur Innenseite des Bildschirms ist negativ, wenn die Z-Achse im Attributwert translator3D negativ ist Das Element wird in den Bildschirm verschoben und die Syntax lautet „transform:translate3d(x, y,z)“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Gibt es einen negativen Wert für die Z-Achse der dreidimensionalen Ebene in CSS3?

Gibt es einen negativen Wert für die Z-Achse der dreidimensionalen Ebene in CSS3? Das Koordinatensystem bezieht sich auf den dreidimensionalen Raum. Der Raum besteht aus drei Achsen, der Z-Achse. Es gibt positive Werte außerhalb des Bildschirms und negative Werte innerhalb des Bildschirms. 3D-Bewegung Translate3D Achsenrichtung

transform: translateX(100px) translateY(100px) translateZ(100px);简写方法transform:translate3d（x，y，z）

Perspektive

erzeugt nahe, große und kleine visuelle stereoskopische Effekte auf der 2D-Ebene, aber der Effekt ist nur zweidimensional.

1. Wenn Sie einen 3D-Effekt auf einer Webseite erzeugen möchten, benötigen Sie eine Perspektive (verstanden als ein 3D-Objekt, das in eine 2D-Ebene projiziert wird)

2. Um die menschliche Sehposition zu simulieren, können Sie über die Anordnung eines Auges nachdenken um zu sehen

3. Perspektive Wir nennen es auch Betrachtungsabstand: Der Betrachtungsabstand ist der Abstand vom menschlichen Auge zum Bildschirm 4 Je näher das Bild auf der Computerebene ist, desto weiter entfernt. desto kleiner ist das Bild

5. Die Einheit der Perspektive ist Pixel

Die auf dem übergeordneten Feld des beobachteten Elements angegebene Perspektive ist

d: Es handelt sich um den Betrachtungsabstand Je kleiner die Perspektive, desto größer das Objekt.

z: Es ist die Z-Achse, der Abstand zwischen dem Objekt und dem Bildschirm. Je größer die Z-Achse (positiver Wert), desto größer ist das Objekt, das wir sehen.

translateZ

Geben Sie einer übergeordneten Box einen Perspektivewert und geben Sie verschiedenen Divs unterschiedliche Z-Werte, und die Effekte, die Sie sehen werden, sind unterschiedlich. 3D-Rotation rotieren3d entlang des Vektors Rotation, der letzte stellt den Rotationswinkel dar

transform：translateX（100px），仅仅在X轴移动
transform：translateY（100px），仅仅在Y轴移动
transform：translateZ（100px），仅仅在Z轴移动
transform：translate3d（x，y，z），设置，xyz的值，z要用像素单位，不带百分比

3D-Rotation kann es dem Element ermöglichen, sich entlang der x-Achse, y-Achse, z-Achse oder einer benutzerdefinierten Achse in der dreidimensionalen Ebene zu drehen

Syntax:

transform:rotate3d(1,0,0,45deg)x轴旋转45deg
transform:rotate3d(1,1,0,45deg)对角线旋转45deg

Um die Richtung der Elementdrehung zu bestimmen, benötigen wir ein Linkshänder-Kriterium

Linkshänder-Kriterium:

Der Daumen der linken Hand zeigt in die positive Richtung der x-Achse

Die Richtung, in die die andere Die Biegung der Finger ist die Richtung, in der sich das Element entlang der x-Achse dreht.

Unterschied

3D-Präsentations-Transformationsstil

1. Steuern Sie, ob das Unterelement die dreidimensionale Umgebung aktiviert

2. Das flache Unterelement aktiviert die dreidimensionale Umgebung Leerzeichen, der Standard-Transformationsstil: Bewahre -3d, das untergeordnete Element öffnet den dreidimensionalen Raum

4 Der Code wird in das übergeordnete Element geschrieben, wirkt sich jedoch auf das untergeordnete Feld aus

5 Sehr wichtig und muss später verwendet werden

Syntax:

transform:rotatex(45deg):沿x轴正方向旋转45deg
transform:rotatey(45deg):沿y轴正方向旋转45deg
transform:rotatez(45deg):沿z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

2. CSS-Stil

Boxspezifikation Größe, denken Sie daran, 3D-Rendering hinzuzufügen

Die hintere Box sollte um 180 Grad entlang der y-Achse gedreht werden

Zum Schluss die Maus geht durch die Box und dreht sich um 180 Grad entlang der y-Achse

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonGibt es in CSS3 einen negativen Wert für die Z-Achse der dreidimensionalen Ebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!