perspective()

Baseline Widely available

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

Dieperspective()CSS Funktion definiert eine Transformation, die den Abstand zwischen dem Benutzer und der z=0-Ebene festlegt, der Perspektive, aus der der Betrachter sehen würde, wenn die zweidimensionale Schnittstelle 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>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>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 Transformationsfunktionperspective() ist Teil destransform-Wertes, der auf das transformierte Element angewendet wird. Dies unterscheidet sich von den Eigenschaftenperspective undperspective-origin,die am übergeordneten Element eines in dreidimensionalem Raum transformierten Kindes angebracht sind.

Syntax

css

perspective(d)

Werte

d

Ist ein<length>, das die Entfernung vom Benutzer zur z=0-Ebene darstellt. Die z=0-Ebene ist die Ebene, in der alles in einer zweidimensionalen Ansicht erscheint, oder der Bildschirm. Werte kleiner als1px (einschließlich null) werden auf1px begrenzt. Negative Werte führen zu Syntaxfehlern.

Andere Werte alsnone führen dazu, 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 Werte der Perspektive repräsentieren eine kleine Transformation; kleine Werte derperspective() repräsentieren eine große Transformation;perspective(none) repräsentiert eine Perspektive 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.	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & - 1 / d & 1 \end{matrix}) \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>  <div>A</div>  <div>B</div>  <div>C</div></div><p>With perspective (9cm):</p><div>  <div>A</div>  <div>B</div>  <div>C</div></div><p>With perspective (4cm):</p><div>  <div>A</div>  <div>B</div>  <div>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>
Individuelle Transformations-Eigenschaften:

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換

perspective()

Help improve MDN