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: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Die perspective-origin und perspective Eigenschaften sind an das übergeordnete Element eines in dreidimensionalem Raum transformierten Kindes gebunden, im Gegensatz zur perspective() Transformationsfunktion, die auf das zu transformierende Element angewendet 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>, die die Position als absoluten Längenwert oder relativ zur Breite des Elements angibt. Der Wert kann negativ sein.
  • left, ein Schlüsselwort, das eine Abkürzung für den 0 Längenwert ist.
  • center, ein Schlüsselwort, das eine Abkürzung für den 50% Prozentwert ist.
  • right, ein Schlüsselwort, das eine Abkürzung für den 100% Prozentwert ist.
y-position

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

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

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 der Perspektivenursprung

Ein Beispiel, wie man perspective-origin ändert, finden Sie unter Verwendung von CSS-Transformationen > Ändern der Perspektivenursprung.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch