perspective
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Die perspective
CSS Eigenschaft bestimmt den Abstand zwischen der z=0-Ebene und dem Benutzer, um einem 3D-positionierten Element eine Perspektive zu verleihen.
Probieren Sie es aus
Syntax
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;
Werte
none
-
Gibt an, dass keine Perspektiventransformation angewendet werden soll.
<length>
-
Ein
<length>
, der den Abstand vom Benutzer zur z=0-Ebene angibt. Es wird verwendet, um eine Perspektiventransformation auf die Kinder des Elements anzuwenden. Negative Werte sind Syntaxfehler. Wenn der Wert kleiner als1px
ist, wird er auf1px
begrenzt.
Beschreibung
Jedes 3D-Element mit z>0 wird größer; jedes 3D-Element mit z<0 wird kleiner. Die Stärke des Effekts wird durch den Wert dieser Eigenschaft bestimmt.
Große Werte von perspective
verursachen eine kleine Transformation;
kleine Werte von perspective
verursachen eine große Transformation.
Die Teile der 3D-Elemente, die hinter dem Benutzer liegen — d. h. ihre z-Achsen-Koordinaten sind größer als der Wert der perspective
-CSS-Eigenschaft — werden nicht gezeichnet.
Der Fluchtpunkt befindet sich standardmäßig in der Mitte des Elements, aber seine Position kann mit der perspective-origin
Eigenschaft geändert werden.
Die Verwendung dieser Eigenschaft mit einem anderen Wert als none
erzeugt einen neuen Stapelkontext. In diesem Fall agiert das Objekt zudem als enthaltender Block für position: fixed
Elemente, die es enthält.
Formale Definition
Initialer Wert | none |
---|---|
Anwendbar auf | transformierbare Elemente |
Vererbt | Nein |
Berechneter Wert | die absolute Länge oder none |
Animationstyp | Längenangabe |
Erstellt Stapelkontext | Ja |
Formale Syntax
perspective =
none |
<length [0,∞]>
Beispiele
Perspektive festlegen
Ein Beispiel, das zeigt, wie ein Würfel variiert, wenn die perspective
an verschiedenen Positionen eingestellt wird, finden Sie unter CSS-Transformationen verwenden > Perspektive festlegen.
Spezifikationen
Specification |
---|
CSS Transforms Module Level 2 # perspective-property |
Browser-Kompatibilität
BCD tables only load in the browser