Beispiel
Stellen Sie die Perspektive, aus dem ein Element betrachtet wird:
div
{
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
Versuch es selber " Definition und Verwendung
Die Perspektive Eigenschaft legt fest, wie viele Pixel ein 3D-Element aus der Sicht platziert wird. Diese Eigenschaft ermöglicht es Ihnen, die Perspektive auf zu ändern, wie 3D-Elemente betrachtet werden.
Wenn für ein Element die Perspektive Eigenschaft zu definieren, ist es die untergeordneten Elemente, die die perspektivische Ansicht bekommen, nicht das Element selbst.
Note: Die Perspektive Eigenschaft wirkt sich nur auf 3D - transformierten Elemente!
Tip: Verwenden Sie diese Eigenschaft zusammen mit der Perspektive Ursprungseigenschaft, die Sie die untere Position der 3D - Elemente zu ändern.
Zum besseren Verständnis der Perspektive Eigenschaft zu verstehen, sehen eine Demo .
| Standardwert: | none |
|---|---|
| Vererbt: | no |
| Anima: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.perspective="50px" 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 | 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:length|none;Eigenschaftswerte
| Eigentumswert | Beschreibung |
|---|---|
| length | Wie weit wird das Element aus der Sicht platziert |
| keiner | Standardwert. Das gleiche wie 0. Die Perspektive ist nicht gesetzt |
| 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: perspective property