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 Perspektiventransformation angewendet werden soll.
<length>-
Ein
<length>, das die Entfernung 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 als1pxist, wird er auf1pxbegrenzt.
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 bewirken eine kleine Transformation;
kleine Werte von perspective bewirken eine große Transformation.
Die Teile der 3D-Elemente, die sich hinter dem Benutzer befinden – das heißt, deren z-Achsen-Koordinaten größer sind als der Wert der perspective CSS-Eigenschaft – werden nicht gezeichnet.
Der Fluchtpunkt wird standardmäßig in der Mitte des Elements platziert, kann jedoch mit der perspective-origin Eigenschaft verändert werden.
Die Verwendung dieser Eigenschaft mit einem anderen Wert als none erzeugt einen neuen Stacking-Kontext. 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 einstellen
Ein Beispiel, das zeigt, wie ein Würfel variiert, wenn die perspective an verschiedenen Positionen festgelegt wird, finden Sie unter CSS-Transformationen verwenden > Perspektive einstellen.
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 2 # perspective-property |
Browser-Kompatibilität
Loading…