La transform-stylepropriété, lorsqu'elle est appliquée à un élément, détermine si les enfants de cet élément sont positionnés dans l'espace 3D ou aplatis.
.parent ( transform-style: preserve-3d; )Il accepte l'une des deux valeurs suivantes: flat(la valeur par défaut) et preserve-3d. Pour démontrer la différence entre les deux valeurs, cliquez sur le bouton bascule dans le CodePen ci-dessous:
Lorsque vous cliquez sur le bouton, la démonstration utilise JavaScript pour basculer la transform-stylevaleur entre preserve-3det flat.
Comme vous pouvez le voir, lorsque la valeur est modifiée en flat, les éléments enfants ne sont plus empilés selon les translateZvaleurs (dans l'espace 3D), mais s'aplatissent pour apparaître comme les éléments par défaut sur une page HTML.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Aucun | 3.0+ | 3.2+ |
Tous les navigateurs nécessitent des préfixes de fournisseur, à l'exception de Firefox 16+. Opera utilise à -webkit-partir de la version 15 et la conversion Blink.
IE10 prend en charge les transformations 3D, mais ne prend pas en charge la transform-stylepropriété.