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 Funktion definiert eine Transformation, die den Abstand zwischen dem Benutzer und der z=0-Ebene festlegt. Dies ist die Perspektive, aus der der Betrachter schauen würde, wenn die zweidimensionale Oberfläche dreidimensional wäre. Ihr Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Die perspective() Transformationsfunktion ist Teil des transform-Wertes, der auf das zu transformierende Element angewendet wird. Dies unterscheidet sich von den perspective und perspective-origin Eigenschaften, die dem Elternteil eines in dreidimensionalem Raum transformierten Kindes zugeordnet sind.

Syntax

Der Perspektivabstand, der mit perspective() verwendet wird, wird durch einen <length> Wert angegeben. Dieser repräsentiert den Abstand zwischen dem Benutzer und der z=0-Ebene oder durch none. Die z=0-Ebene ist die Ebene, auf der alles in einer zweidimensionalen Ansicht oder dem Bildschirm erscheint. Negative Werte sind Syntaxfehler. Werte kleiner als 1px (einschließlich Null) werden auf 1px begrenzt. Andere Werte als none bewirken, dass Elemente mit positiven z-Positionen größer erscheinen und Elemente mit negativen z-Positionen kleiner erscheinen. Elemente mit z-Positionen, die gleich oder größer als der Perspektivwert sind, verschwinden, als wären sie hinter dem Benutzer. Große Perspektivwerte repräsentieren eine kleine Transformation; kleine Werte von perspective() repräsentieren eine große Transformation; perspective(none) repräsentiert die Perspektive aus unendlicher Entfernung und keine Transformation.

css
perspective(d)

Werte

d

Ist eine <length>, die den Abstand vom Benutzer zur z=0-Ebene darstellt. Wenn es 0 oder ein negativer Wert ist, wird keine Perspektivtransformation angewendet.

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3

Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden.

Diese Transformation ist keine lineare Transformation in ℝ^3 und kann nicht mit einer kartesischen Koordinatenmatrix dargestellt werden.
(10000100001000−1/d1)\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -\frac{1}{d} & 1 \\ \end{array} \right)

Formale Syntax

<perspective()> = 
  perspective( [ <length [0,∞]> | none ] )

Beispiele

HTML

html
<p>Without perspective:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

CSS

css
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# funcdef-perspective

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch