jQuery reférence sélecteur
Tutoriel CSS : transform-style
La propriété CSS transform-style définit la manière dont les éléments enfants d'un élément avec une transformation 3D sont affichés dans l'espace 3D.
Syntaxe générale de la propriété css transform-style
La syntaxe générale de la propriété transform-style est la suivante :
transform-style: flat|preserve-3d|initial|inherit;
| Valeurs par défaut | flat |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.transformStyle="preserve-3d" |
Valeurs possibles de la propriété css transform-style
- flat : Les éléments enfants sont affichés dans le plan 2D sans perspective.
- preserve-3d : Les éléments enfants conservent leur position 3D par rapport à l'élément parent.
- initial : Rétablit la valeur par défaut de la propriété.
- inherit : Hérite la valeur de la propriété du parent.
Exemples pratiques d'utilisation de la propriété css transform-style
Voici un exemple pratique d'utilisation de la propriété transform-style:
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple transform-style</title>
<style>
.example-box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 20px 0;
}
.example-box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>La propriété css transform-style</h1>
<div class="example-box"></div>
</body>
</html>
Résultat:
Dans cet exemple, lorsqu'on survole la boîte grise, elle effectue une rotation de 45 degrés. Sans la propriété transform-style: preserve-3d;, la rotation ne serait pas visible puisque les éléments enfants perdraient leur position 3D.
Astuces et conseils d'utilisation
- Assurez-vous d'avoir activé la transformation 3D sur l'élément parent en utilisant la propriété transform avec une valeur de transformation 3D.
- L'utilisation de la valeur preserve-3d permet de maintenir la perspective et la profondeur des éléments enfants.
- Il est recommandé de tester les transformations 3D sur différents navigateurs pour assurer une compatibilité optimale.
Voilà, vous avez maintenant une meilleure compréhension de la propriété CSS transform-style. Amusez-vous à expérimenter et à créer des effets visuels impressionnants avec cette fonctionnalité ! N'oubliez pas d'explorer d'autres propriétés de transformation CSS telles que translate, scale, rotate, etc., pour ajouter des effets supplémentaires à vos éléments transformés. N'hésitez pas à consulter la documentation officielle de CSS pour en savoir plus sur la propriété transform-style et d'autres fonctionnalités CSS avancées. En conclusion, la propriété transform-style est un outil puissant pour contrôler la disposition et la présentation des éléments enfants dans un contexte 3D. En utilisant les valeurs appropriées, vous pouvez créer des transformations complexes et des animations visuellement captivantes. Expérimentez, innovez et laissez libre cours à votre créativité !
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 36.0 12.0 -webkit- | 11.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
Exemple 2
Dans cet exemple, nous avons un code HTML qui illustre l'utilisation de la propriété CSS transform-style pour créer des transformations 3D.
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple transform-style</title>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
}
</style>
</head>
<body>
<h1>La propriété css transform-style</h1>
<div id="div1">
<div id="div2">BONJOUR
<div id="div3">Le jaune</div>
</div>
</div>
</body>
</html>
Le code crée une structure de divs imbriqués. Voici comment fonctionne le code :
- - Le div avec l'id "div1" est défini avec une taille de 200px par 200px et une marge de 100px. Il a également une bordure de 1px en noir. Ce div sert de conteneur principal.
- - À l'intérieur de "div1", nous avons un autre div avec l'id "div2". Ce div est positionné de manière absolue et a une taille de padding de 50px. Il a une bordure de 1px en noir et une couleur de fond rouge. De plus, il a une transformation "rotateY(60deg)" appliquée, ce qui lui donne une rotation sur l'axe Y.
- - À l'intérieur de "div2", il y a un autre div avec l'id "div3". Ce div est également positionné de manière absolue et a une taille de padding de 40px. Il a une bordure de 1px en noir et une couleur de fond jaune. Il a une transformation "rotateY(-60deg)" appliquée, ce qui lui donne une rotation opposée sur l'axe Y.
L'élément clé dans cet exemple est la propriété "transform-style: preserve-3d" appliquée à "div2". Cela permet de maintenir la position 3D de "div3" par rapport à "div2" lors de la transformation. Sans cette propriété, "div3" serait rendu en 2D et ne suivrait pas la transformation de "div2".
L'ensemble du code crée donc un effet visuel où "div2" est incliné sur l'axe Y et "div3" est incliné dans la direction opposée. Cela crée une impression de profondeur et de perspective.
Cet exemple illustre bien l'utilisation de la propriété transform-style pour maintenir la position 3D des éléments enfants lors de transformations 3D. Vous pouvez expérimenter en modifiant les valeurs de rotation, les couleurs de fond, les tailles, etc., pour obtenir différents effets visuels en utilisant cette propriété.