1. Web
  2. CSS
  3. Reference
  4. Properties
  5. perspective-origin

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

perspective-origin CSS property

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Die CSS-Eigenschaft perspective-origin bestimmt die Position, von der aus die betrachtende Person schaut. Sie wird von der Eigenschaft perspective als Fluchtpunkt verwendet.

Die Eigenschaften perspective-origin und perspective werden im Gegensatz zur Transformationsfunktion perspective(), die auf dem transformierten Element platziert wird, dem übergeordneten Element eines im dreidimensionalen Raum transformierten Kindelements zugeordnet.

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);
}

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>, das die Position als absoluten Längenwert oder relativ zur Breite des Elements angibt. Der Wert kann negativ sein.
  • left, ein Schlüsselwort als Kurzform für den Längenwert 0.
  • center, ein Schlüsselwort als Kurzform für den Prozentwert 50%.
  • right, ein Schlüsselwort als Kurzform für den Prozentwert 100%.
y-position

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

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

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> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

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

Beispiele

Ändern des Perspektivenursprungs

Ein Beispiel, das zeigt, wie perspective-origin geändert wird, finden Sie unter Verwendung von CSS-Transformationen > Ändern des Perspektivenursprungs.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden