perspective
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die perspective CSS-Eigenschaft bestimmt die Entfernung zwischen der z=0-Ebene und dem Benutzer, um einem 3D-positionierten Element eine Perspektive zu geben.
Probieren Sie es aus
perspective: none;
perspective: 800px;
perspective: 23rem;
perspective: 5.5cm;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
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 Perspektivtransformation angewendet werden soll.
<length>-
Ein
<length>, der die Entfernung vom Benutzer zur z=0-Ebene angibt. Er wird verwendet, um eine Perspektivtransformation auf die Kinder des Elements anzuwenden. Negative Werte sind Syntaxfehler. Wenn der Wert kleiner als1pxist, wird er auf1pxfestgelegt.
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 sich hinter dem Benutzer befinden — das heißt, ihre z-Achsen-Koordinaten sind größer als der Wert der perspective CSS-Eigenschaft — werden nicht gezeichnet.
Der Fluchtpunkt wird standardmäßig in der Mitte des Elements platziert, kann aber mit der perspective-origin-Eigenschaft verändert werden.
Die Verwendung dieser Eigenschaft mit einem anderen Wert als none erzeugt einen neuen Stacking Context. In diesem Fall fungiert das Objekt auch als Enthaltender Block für position: fixed-Elemente, die es enthält.
Formale Definition
| Anfangswert | 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 ist, finden Sie unter Verwenden von CSS-Transformierungen > Perspektive festlegen.
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 2 # perspective-property |