Propriété CSS transform-style
La propriété transform-style spécifie comment les éléments enfants sont rendus dans un espace tridimensionnel (3D).
Cette propriété fait partie des propriétés CSS3.
Elle ne fonctionne qu'avec la propriété transform.
La propriété transform-style possède deux valeurs : flat et preserve-3d. Si la valeur flat est définie, les enfants de l'élément n'existeront pas indépendamment dans l'espace 3D.
INFO
Pour une compatibilité maximale avec les navigateurs, des extensions telles que -webkit- pour Safari, Google Chrome et Opera (versions récentes) sont utilisées avec cette propriété.
| Valeur initiale | flat |
|---|---|
| S'applique à | Éléments transformables. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.transformStyle = "flat"; |
Syntaxe
Valeurs CSS de transform-style
transform-style: flat | preserve-3d | initial | inherit;Exemple de la propriété transform-style :
Exemple de code CSS pour transform-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#element {
position: relative;
height: 250px;
width: 250px;
margin: 50px;
padding: 10px;
border: 2px solid #666666;
background-color: #eeeeee;
}
#element1 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #8ebf42;
-webkit-transform: rotateY(50deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(50deg);
transform-style: preserve-3d;
}
#element2 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #1c87c9;
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
}
</style>
</head>
<body>
<h2>Transform-style property example</h2>
<div id="element">
<div id="element1">
Green
<div id="element2">Blue</div>
</div>
</div>
</body>
</html>Résultat
Exemple de la propriété transform-style avec la valeur "flat" :
Exemple de la propriété CSS transform-style avec la valeur flat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
position: relative;
height: 250px;
margin: 50px;
padding: 10px;
border: 2px solid #cccccc;
background-color: #eeeeee;
}
.element1 {
margin: 20px;
border: 1px dotted;
height: 150px;
width: 150px;
background-color: green;
transform: rotateX(15deg);
transform-style: flat;
}
.element2 {
margin: 20px;
border: 1px dotted;
height: 200px;
width: 200px;
background-color: lightgreen;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Transform-style property example</h2>
<div class="element">
<div class="element1">
Green
<div class="element2">Blue</div>
</div>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| flat | Définit que les enfants de l'élément ne seront pas positionnés dans un espace tridimensionnel. Il s'agit de la valeur par défaut de cette propriété. |
| preserve-3d | Définit que les enfants de l'élément seront positionnés dans un espace tridimensionnel. |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite cette propriété de son élément parent. |
Pratique
La propriété transform-style ne fonctionne qu'avec