Beispiel
Lassen Sie die transformierten Kind Elemente, die die 3D-Transformationen erhalten:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Versuch es selber " Definition und Verwendung
Die Transformation-style-Eigenschaft gibt an, wie verschachtelte Elemente werden im 3D-Raum wiedergegeben.
Note: Diese Eigenschaft muss zusammen mit dem verwendet werden , verwandeln Eigenschaft.
Zum besseren Verständnis der Transformation-Stil, sehen eine Demo .
| Standardwert: | flat |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.transformStyle="preserve-3d" 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 | |||||
|---|---|---|---|---|---|
| transform-style | 36.0 12.0 -webkit- | 11.0 | 16.0 10,0 -moz- | 9.0 4.0 -webkit- | 23.0 15,0 -webkit- |
CSS-Syntax
transform-style: flat|preserve-3d|initial|inherit;Eigenschaftswerte
| Eigentumswert | Beschreibung |
|---|---|
| Wohnung | Gibt an, dass untergeordnete Elemente seiner 3D-Position nicht beibehalten wird. Dies ist die Standardeinstellung |
| preserve-3d | Gibt an, dass untergeordnete Elemente seiner 3D-Position erhalten wird |
| 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 2D - Transformationen
CSS Tutorial: CSS 3D Transforms
HTML - DOM - Referenz: transformStyle property