transform-style |
Style de transformation |
| CSS3 |
|
Syntaxe
|
transform-style: flat|inherit|initial|preserve-3d;
|
Paramètres
| Paramètre |
Description |
| flat |
Ce paramètre permet d'indiquer que les éléments enfants ne doivent pas préservé la position en 3 dimensions. C'est la valeur par défaut. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| preserve-3d |
Ce paramètre permet d'indiquer que les éléments enfants doivent préservé la position en 3 dimensions. |
Description
Cette propriété permet d'indiquer comment les éléments imbriqués sont rendus dans un espace en 3 dimensions.
Remarques
- Fonction principale : La propriété transform-style détermine si les enfants d'un élément sont positionnés dans un espace 3D ou simplement aplatis
dans le plan 2D. Cela est particulièrement utile pour les transformations complexes où les enfants doivent préserver leurs perspectives individuelles.
- Compatibilité avec les transformations : La propriété transform-style n'a d'effet que si l'élément parent a une transformation en cours, comme avec
transform. Sinon, elle n'a aucun impact visible sur la disposition des enfants.
- Contexte 3D vs 2D : Lorsque vous utilisez preserve-3d, chaque élément enfant peut être transformé individuellement dans l'espace tridimensionnel. Cela
permet de créer des animations et des designs visuellement impressionnants, comme des cubes en rotation.
- Problèmes de performance : L'utilisation de preserve-3d peut être coûteuse en termes de performances, en particulier sur les appareils avec des
GPU limités, car les calculs pour les transformations 3D sont plus complexes que ceux pour les transformations 2D.
- Héritage : La propriété transform-style n'est pas héritée automatiquement. Vous devez donc l'appliquer explicitement à chaque parent dans une chaîne
d'éléments nécessitant des transformations 3D.
- Effets combinés avec perspective : Pour que transform-style: preserve-3d produise un effet visible, l'élément parent ou un ancêtre doit également
appliquer une perspective (perspective ou perspective-origin). Sans cela, les transformations 3D risquent de ne pas être perceptibles.
- Support des navigateurs : Bien que largement pris en charge par les navigateurs modernes, certaines versions anciennes ou des navigateurs spécifiques
peuvent présenter des bogues ou ne pas supporter correctement preserve-3d. Il est donc important de tester vos effets 3D sur plusieurs plateformes.
Dernière mise à jour : Dimanche, le 20 décembre 2015
