CSS -Perspektiveneffekt: Sollte das Perspektive -Attribut auf das übergeordnete Element oder das untergeordnete Element platziert werden?

CSS 3D -Effekt: Wenden Sie das Perspektivattribut auf das übergeordnete Element oder das untergeordnete Element an?

Dieser Artikel analysiert die optimale Anwendungsposition des perspective bei der Erstellung von dreidimensionalen CSS-Effekten und erklärt die Effektunterschiede, die durch verschiedene Positionen mitgebracht werden. Wir werden untersuchen, warum perspective normalerweise auf Elternelemente angewendet werden sollte, die 3D -Transformationselemente enthalten.

Eine häufige Frage ist: Muss perspective mit transform-style: preserve-3d Attribut auf das übergeordnete Element des Elements platziert werden? Das folgende Beispiel für Würfelrotation ist ein Beispiel. Wenn perspective auf das übergeordnete Element des Würfels angewendet wird, ist der Rotationseffekt normal und zeigt den erwarteten dreidimensionalen Perspektiveffekt. Wenn Sie jedoch perspective auf das Würfelelement selbst anwenden, wird der Rotationseffekt verzerrt.

Der Schlüssel ist, dass perspective die Standpunktposition des Beobachters definiert, der den Abstand zwischen dem Beobachter und der dreidimensionalen Szene bestimmt und damit den Perspektiveffekt des dreidimensionalen Elements beeinflusst. Wenn perspective auf das übergeordnete Element angewendet wird, liegt der Standpunkt außerhalb des übergeordneten Elements und alle Kinder sind an den Standpunkt gebunden, wodurch die richtige Perspektivbeziehung aufrechterhalten wird. Während sich der Würfel dreht, behält sich jedes Gesicht den richtigen Anteil und die richtige Tiefe visuell bei.

Wenn jedoch perspective auf ein untergeordnetes Element (Würfel) angewendet wird, befindet sich der Standpunkt im Würfel. Während des Rotationsprozesses ändert sich der Abstand von jedem Gesicht zum Standpunkt dynamisch, wodurch die erwartete Perspektivbeziehung verstößt und den Würfel eher den normalen Rotationseffekt verformt.

Um diese Deformation klarer zu beobachten, können jeder Gesicht des Würfels Grenzen hinzugefügt werden. Die Anwendung von perspective auf Elternelemente stellt sicher, dass alle Kinder während der dreidimensionalen Transformation die korrekte Perspektivbeziehung beibehalten und so eine natürlichere und realistischere dreidimensionale Wirkung darstellen. Daher besteht die beste Praxis darin, perspective auf das übergeordnete Element anzuwenden, das transform-style: preserve-3d Element enthält.

Das obige ist der detaillierte Inhalt vonCSS -Perspektiveneffekt: Sollte das Perspektive -Attribut auf das übergeordnete Element oder das untergeordnete Element platziert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!