Beispiel
Richten Sie eine Basis Platzierung 3D-Element:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
Versuch es selber " Definition und Verwendung
Die Perspektive-origin Eigenschaft definiert, wo ein 3D-Element in der x- und der y-Achse basiert. Diese Eigenschaft ermöglicht es Ihnen, die untere Position der 3D-Elemente zu ändern.
Bei der Definition der Perspektive Ursprungseigenschaft für ein Element, ist es die untergeordneten Elemente, die positioniert sind, nicht das Element selbst.
Note: Diese Eigenschaft muss zusammen mit dem verwendet werden Perspektive Eigenschaft, und wirkt sich nur auf 3D - Elemente umgewandelt!
Zum besseren Verständnis der Perspektive Ursprungseigenschaft, sehen eine Demo .
| Standardwert: | 50% 50% |
|---|---|
| Vererbt: | no |
| Anima: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.perspectiveOrigin="10px 50%" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit- oder -moz- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| perspective-origin | 36.0 12.0 -webkit- | 10.0 | 16.0 10,0 -moz- | 9.0 4.0.3 -webkit- | 23.0 15,0 -webkit- |
CSS-Syntax
perspective-origin:x-axis y-axis|initial|inherit;Eigenschaftswerte
| Eigentumswert | Beschreibung |
|---|---|
| x-axis | Definieren, wo die Sicht auf der x-Achse platziert Mögliche Werte:
Standardwert: 50% |
| y-axis | Definieren, wo die Sicht auf der y-Achse platziert Mögliche Werte:
Standardwert: 50% |
| Initiale | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs |
| erben | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Verwandte Seiten
CSS Tutorial: CSS 3D Transforms
HTML - DOM - Referenz: perspectiveOrigin property