Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Kopieren Sie dies in das übergeordnete Element.
Kopieren Sie dies in das untergeordnete Element.
Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯
In CSS wird die Eigenschaft perspective in Kombination mit 3D-Transformationen verwendet, um die Tiefenperspektive für Elemente zu steuern. Sie definiert, wie viel Perspektive oder Tiefe auf ein 3D-transformiertes Element angewendet werden soll, wodurch ihm ein Gefühl von Tiefe und Entfernung verliehen wird.
Die Eigenschaft perspective akzeptiert einen Längenwert, typischerweise gemessen in Pixeln oder anderen Längeneinheiten, um die Tiefe der Perspektive zu definieren. Je größer der Wert, desto ausgeprägter ist der Perspektiveffekt. Kleinere Werte führen zu einer weniger auffälligen Perspektive.
Hier ist die grundlegende Syntax für die Verwendung der Eigenschaft perspective:
.perspective-element {
perspective: 1000px;
}
In diesem Beispiel:
Sie würden die Eigenschaft perspective typischerweise in Verbindung mit 3D-Transformationsfunktionen wie rotateX(), rotateY() und translateZ() verwenden, um 3D-Effekte auf Elemente zu erzeugen, wodurch sie näher oder weiter vom Betrachter entfernt erscheinen.
Hier ist ein einfaches Beispiel für die Verwendung von perspective mit einem 3D-transformierten Element:
.perspective-element {
perspective: 1000px;
transform: rotateY(30deg) translateZ(50px);
}
In diesem Fall hat das Element eine Perspektive von 1000 Pixeln und wird auf der Y-Achse gedreht und auf der Z-Achse verschoben, um einen 3D-Effekt zu erzeugen.
Die Eigenschaft perspective ist besonders nützlich, um 3D-Transformationen und Animationen im Webdesign und in Benutzeroberflächen zu erstellen, wodurch Elemente ein realistisches Gefühl von Tiefe und räumlicher Positionierung erhalten.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.