Perspektive - CSS-Tricks | CSS-Almanach 2025

Die perspectiveCSS-Eigenschaft gibt einem Element einen 3D-Raum, indem der Abstand zwischen der Z-Ebene und dem Benutzer beeinflusst wird.

Die Stärke des Effekts wird durch den Wert bestimmt. Je kleiner der Wert, desto näher kommt man der Z-Ebene und desto beeindruckender ist der visuelle Effekt. Je größer der Wert, desto subtiler wird der Effekt.

Wichtig: Beachten Sie, dass die Eigenschaft "Perspektive" keinen Einfluss darauf hat, wie das Element gerendert wird. Es ermöglicht einfach einen 3D-Raum für untergeordnete Elemente. Dies ist der Hauptunterschied zwischen der transform: perspective()Funktion und der perspectiveEigenschaft. Das erste gibt Elementtiefe, während das letztere einen 3D-Raum erzeugt, der von allen transformierten Kindern geteilt wird.

/** * Syntax * perspective: none |  */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); )

Schauen Sie sich diesen Stift an!

Die obige Demo soll den Unterschied zwischen der Funktion und der Eigenschaft zeigen.

Auf der linken Seite sehen Sie die Eigenschaft, die auf das übergeordnete perspective: 50emElement ( transform: rotateY(50deg)) der transformierten Elemente ( ) angewendet wird .
Auf der rechten Seite wird die Perspektive aus der Transformation direkt auf Kinder angewendet ( transform: perspective(50em) rotateY(50deg)).

Dies zeigt, wie durch das Einstellen der Perspektive auf die Eltern alle Kinder denselben 3D-Raum und damit denselben Fluchtpunkt teilen.

Probieren wir etwas noch Cooleres aus: einen Würfel mit 3D-Transformationen und Perspektive.

Schauen Sie sich diesen Stift an!

So wird der Würfel hergestellt: Er basiert auf zwei verschachtelten Wrappern (einer, um die Würfelperspektive zu erhalten, und einem, um alle Seiten zu umwickeln) und 6 Elementen, um die Seiten zu erstellen. Jedes Element erhält eine eigene Transformationsmischung, die sich im 3D-Raum verschiebt und dreht (z transform: rotateX(90deg) translateZ(1em). B. ).

Lassen Sie uns mit einer Demo abschließen, die die Grundlage eines realen Designs darstellt: eine Wand aus Fotos + Bildunterschriften mit Perspektive und Transformation.