perspective-origin

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-origin CSS Eigenschaft bestimmt die Position, von der aus der Betrachter schaut. Sie wird als Fluchtpunkt von der perspective Eigenschaft verwendet.

Probieren Sie es aus

perspective-origin: center;

perspective-origin: top;

perspective-origin: bottom right;

perspective-origin: -170%;

perspective-origin: 500% 200%;

<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: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  perspective: 250px;
}

.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-origin und perspective Eigenschaften sind dem Elternteil eines in einem dreidimensionalen Raum transformierten Kindelements zugeordnet, im Gegensatz zur perspective() Transformationsfunktion, die auf das Element angewendet wird, das transformiert wird.

Syntax

css
/* One-value syntax */
perspective-origin: x-position;

/* Two-value syntax */
perspective-origin: x-position y-position;

/* When both x-position and y-position are keywords,
   the following is also valid */
perspective-origin: y-position x-position;

/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

Werte

x-position

Gibt die Position der Abszisse des Fluchtpunkts an. Sie kann einen der folgenden Werte haben:

  • <length-percentage>, der die Position als absoluter Längenwert oder relativ zur Breite des Elements angibt. Der Wert kann negativ sein.
  • left, ein Schlüsselwort als Abkürzung für den 0-Längenwert.
  • center, ein Schlüsselwort als Abkürzung für den 50%-Prozentwert.
  • right, ein Schlüsselwort als Abkürzung für den 100%-Prozentwert.
y-position

Gibt die Position der Ordinate des Fluchtpunkts an. Sie kann einen der folgenden Werte haben:

  • <length-percentage>, der die Position als absoluter Längenwert oder relativ zur Höhe des Elements angibt. Der Wert kann negativ sein.
  • top, ein Schlüsselwort als Abkürzung für den 0-Längenwert.
  • center, ein Schlüsselwort als Abkürzung für den 50%-Prozentwert.
  • bottom, ein Schlüsselwort als Abkürzung für den 100%-Prozentwert.

Formale Definition

Anfangswert50% 50%
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertebezieht sich auf die Größe der äußeren Box
Berechneter Wertfor <length> the absolute value, otherwise a percentage
Animationstypsimple list of length, percentage, or calc

Formale Syntax

perspective-origin = 
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Ändern des Fluchtpunkts

Ein Beispiel, das zeigt, wie perspective-origin geändert wird, finden Sie unter Using CSS transforms > Changing the perspective origin.

Spezifikationen

Specification
CSS Transforms Module Level 2
# perspective-origin-property

Browser-Kompatibilität

Siehe auch