perspective()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 schauen würde, wenn die 2-dimensionale Oberfläche dreidimensional wäre. Das Ergebnis ist ein <transform-function>-Datentyp.

Probieren Sie es aus

transform: perspective(0);

transform: perspective(none);

transform: perspective(800px);

transform: perspective(23rem);

transform: perspective(6.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);
}

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

Syntax

css

perspective(d)

Werte

d

Ist ein <length> und repräsentiert den Abstand vom Benutzer zur z=0-Ebene. Die z=0-Ebene ist die Ebene, in der alles in einer zweidimensionalen Ansicht erscheint, oder der Bildschirm. Werte kleiner als 1px (einschließlich null) werden auf 1px begrenzt. Negative Werte sind Syntaxfehler.

Werte außer 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 Perspektivenwert sind, verschwinden, als ob sie hinter dem Benutzer wären. Große Perspektivenwerte repräsentieren eine kleine Transformation; kleine Werte von perspective() repräsentieren eine große Transformation; perspective(none) repräsentiert Perspektiven aus unendlicher Entfernung und keine Transformation.

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.	$\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

Siehe auch

transform
<transform-function>
Einzelne Transformations-Eigenschaften: