La transform-stylepropiedad, cuando se aplica a un elemento, determina si los elementos secundarios de ese elemento se colocan en el espacio 3D o se aplanan.
.parent ( transform-style: preserve-3d; )Acepta uno de dos valores: flat(el predeterminado) y preserve-3d. Para demostrar la diferencia entre los dos valores, haga clic en el botón de alternancia en el CodePen a continuación:
Cuando se hace clic en el botón, la demostración usa JavaScript para alternar el transform-stylevalor entre preserve-3dy flat.
Como puede ver, cuando se cambia el valor a flat, los elementos secundarios ya no se apilan de acuerdo con los translateZvalores (en el espacio 3D), sino que se aplanan para aparecer como los elementos están predeterminados en una página HTML.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Ninguno | 3.0+ | 3.2+ |
Todos los navegadores requieren prefijos de proveedor, excepto Firefox 16+. Opera utiliza a -webkit-partir de la versión 15 y la conversión Blink.
IE10 admite transformaciones 3D, pero no admite la transform-stylepropiedad.