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, aus der 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 an das übergeordnete Element eines in einem dreidimensionalen Raum transformierten Kindes gebunden, anders als die perspective()
-Transformationsfunktion, die auf das transformierte Element angewendet wird.
Syntax
/* 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 Abszissenposition des Fluchtpunkts an. Es kann einen der folgenden Werte haben:
<length-percentage>
, der 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 Längenwert0
ist.center
, ein Schlüsselwort, das eine Abkürzung für den Prozentwert50%
ist.right
, ein Schlüsselwort, das eine Abkürzung für den Prozentwert100%
ist.
- y-Position
-
Gibt die Ordinatenposition des Fluchtpunkts an. Es kann einen der folgenden Werte haben:
<length-percentage>
, der 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 Längenwert0
ist.center
, ein Schlüsselwort, das eine Abkürzung für den Prozentwert50%
ist.bottom
, ein Schlüsselwort, das eine Abkürzung für den Prozentwert100%
ist.
Formelle Definition
Anfangswert | 50% 50% |
---|---|
Anwendbar auf | transformierbare Elemente |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Größe der äußeren Box |
Berechneter Wert | for <length> the absolute value, otherwise a percentage |
Animationstyp | simple list of length, percentage, or calc |
Formelle 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
Änderung des Perspektivursprungs
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 |