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, die Perspektive, aus der der Betrachter die 2-dimensionale Schnittstelle als 3-dimensional wahrnehmen würde. Ihr Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

Die perspective() Transform-Funktion 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 Elternelement eines in 3-dimensionalem Raum transformierten Kindes zugeordnet sind.

Syntax

Der Perspektivabstand, der von perspective() verwendet wird, wird durch einen <length> Wert angegeben, der den Abstand zwischen dem Benutzer und der z=0-Ebene repräsentiert, oder durch none. Die z=0-Ebene ist die Ebene, in der alles in einer 2-dimensionalen Ansicht erscheint, oder der Bildschirm. Negative Werte sind Syntaxfehler. Werte kleiner als 1px (einschließlich Null) werden auf 1px begrenzt. Werte, die nicht none sind, lassen 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 ob sie sich hinter dem Benutzer befinden. Große Perspektivwerte repräsentieren eine kleine Transformation; kleine perspective() Werte repräsentieren eine große Transformation; perspective(none) repräsentiert einen Perspektivpunkt aus unendlicher Distanz und keine Transformation.

css
perspective(d)

Werte

d

Ist ein <length> der den Abstand vom Benutzer zur z=0-Ebene darstellt. Ist dieser Wert 0 oder negativ, 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 durch eine kartesische 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)

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