Wie wirkt sich die Transformationsreihenfolge auf 3D-CSS-Transformationen aus, insbesondere auf die Perspektive?

CSS 3D-Transformationen: Perspektivische Platzierung und Transformationsreihenfolge

In CSS beeinflusst die Perspektiveneigenschaft die Art und Weise, wie 3D-Transformationen auf Elemente angewendet werden. Benutzer haben jedoch beobachtet, dass sich eine Änderung der Position der Perspektiveneinstellung auf das Transformationsergebnis auswirken kann.

Problemerklärung

Die Reihenfolge, in der Transformationen angewendet werden, ist entscheidend. Gemäß den CSS-Spezifikationen wird die Transformationsmatrix berechnet, indem die Transformationen in der Eigenschaft „transform“ von links nach rechts angewendet werden. Wenn die Perspektive am Ende der Eigenschaft „transformieren“ festgelegt ist, erfolgt die Übersetzung vor der Berücksichtigung der Perspektive.

Transformationsreihenfolge

Um dieses Problem zu vermeiden, muss die Perspektive berücksichtigt werden sollte immer an erster Stelle in der Eigenschaft „transform“ stehen. Dadurch wird die Perspektive vor allen anderen Transformationen angewendet, um sicherzustellen, dass die Übersetzungen korrekt erfolgen.

Beispiel

Bedenken Sie den folgenden Code:

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

Im ersten Feld wird die Perspektive vor der Übersetzung festgelegt, um sicherzustellen, dass die Übersetzung mit der angewendeten Perspektive erfolgt. Im zweiten Feld wird die Perspektive nach der Übersetzung festgelegt, was dazu führt, dass die Übersetzung ohne Berücksichtigung der Perspektive angewendet wird.

Zusätzliche Hinweise

• Platzierung der Perspektive innerhalb des Elements selbst ist unnötig.
• Die Reihenfolge anderer Transformationen (z. B. Drehen, Skalieren) ist ebenfalls von Bedeutung. Später in der Sequenz angewendete Transformationen können sich auf die früher angewendeten auswirken.

Das obige ist der detaillierte Inhalt vonWie wirkt sich die Transformationsreihenfolge auf 3D-CSS-Transformationen aus, insbesondere auf die Perspektive?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!