CSS -Transformationsstil- Eigenschaft
Beispiel
Lassen Sie die transformierten untergeordneten Elemente die 3D-Transformationen beibehalten:
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Definition und Verwendung
Die transform-style
Eigenschaft gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden.
Hinweis: Diese Eigenschaft muss zusammen mit der Transformationseigenschaft verwendet werden .
transform-style
Um die Eigenschaft
besser zu verstehen , sehen Sie sich eine Demo an .
Standardwert: | eben |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.transformStyle="preserve-3d" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit- oder -moz- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
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
Property Value | Description |
---|---|
flat | Specifies that child elements will NOT preserve its 3D position. This is default |
preserve-3d | Specifies that child elements will preserve its 3D position |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Verwandte Seiten
CSS-Tutorial: CSS-2D-Transformationen
CSS-Tutorial: CSS-3D-Transformationen
HTML-DOM-Referenz: transformStyle-Eigenschaft