CSS perspective-origin-Eigenschaft
Die perspective-origin-Eigenschaft definiert die Position, aus der der Benutzer das in 3D positionierte Element betrachtet.
Die perspective-origin-Eigenschaft ist eine der CSS3-Eigenschaften.
Die perspective-Eigenschaft verwendet den Wert von perspective-origin als Fluchtpunkt. Standardmäßig liegt der Fluchtpunkt eines 3D-Raums in der Mitte. Mit der perspective-origin-Eigenschaft kann die Position des Fluchtpunkts geändert werden.
Die perspective-origin-Eigenschaft muss zusammen mit der perspective-Eigenschaft auf demselben Element oder einem übergeordneten Element verwendet werden, um wirksam zu werden.
Wenn zwei oder mehr Werte angegeben werden, aber keiner davon ein Schlüsselwort ist, beschreibt der erste Wert die horizontale Position und der zweite die vertikale Position. Wenn nur ein Wert definiert ist, wird für den zweiten Wert standardmäßig die Mitte angenommen.
INFO
Nur das untergeordnete Element erhält eine Perspektivansicht, nicht das Element selbst.
| Anfangswert | 50% 50% |
|---|---|
| Anwendbar auf | Transformierbare Elemente. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Transformation der Perspektive ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.perspectiveOrigin = "20px 70%"; |
Syntax
CSS perspective-origin syntax
perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;Beispiel für die perspective-origin-Eigenschaft:
CSS perspective-origin code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: 50% 50%;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: 50% 50%:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Ergebnis
Beispiel für die perspective-origin-Eigenschaft mit dem Wert „left“:
CSS perspective-origin left value example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 20px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: left;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: left:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Beispiel für die perspective-origin-Eigenschaft mit dem Wert „right“:
CSS perspective-origin right value example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 160px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Beispiel für die perspective-origin-Eigenschaft mit dem Wert „bottom right“:
CSS perspective-origin bottom example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: bottom right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: bottom right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| x-Position | Gibt die Position der Ansicht auf der x-Achse an. Mögliche Werte sind: - left (entspricht 0), - right (entspricht 100 %), - center (entspricht 50 %), - Längenangabe, - Prozentwert. |
| y-Position | Gibt die Position der Ansicht auf der y-Achse an. Mögliche Werte sind: - top (entspricht 0), - center (entspricht 50 %), - bottom (entspricht 100 %), - Längenangabe. |
| x | Legt die horizontale Position auf die Mitte (50 %) fest. |
| y | Legt die vertikale Position auf die Mitte (50 %) fest. |
| closest-side | Legt den Perspektivursprung auf die dem Betrachter nächstgelegene Seite des Elements fest. |
| farthest-side | Legt den Perspektivursprung auf die dem Betrachter am weitesten entfernte Seite des Elements fest. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt diese Eigenschaft vom übergeordneten Element. |
Practice
Was bewirkt die CSS-Eigenschaft 'perspective-origin'?