Propiedad de estilo de transformación CSS
Ejemplo
Deje que los elementos secundarios transformados conserven las transformaciones 3D:
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Definición y uso
La transform-style
propiedad especifica cómo se representan los elementos anidados en el espacio 3D.
Nota: Esta propiedad debe usarse junto con la propiedad transform .
Para comprender mejor la transform-style
propiedad,
vea una demostración .
Valor por defecto: | plano |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.transformStyle="preservar-3d" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- o -moz- especifican la primera versión que funcionó con un prefijo.
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- |
Sintaxis CSS
transform-style: flat|preserve-3d|initial|inherit;
Valores de propiedad
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 |
páginas relacionadas
Tutorial de CSS: Transformaciones 2D de CSS
Tutorial de CSS: Transformaciones 3D de CSS
Referencia HTML DOM: propiedad transformStyle