Inverse une chaîne
...
Les propriétés CSS
Exemple: Laissez les éléments enfants transformées à préserver les transformations 3D :
Exemple Copier le code
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari et Chrome */
-webkit-transform-style: preserve-3d; /* Safari et Chrome */
}
Appui de navigateur
La propriété transform-style est prise en charge dans Firefox.
Chrome et Safari prend en charge une solution de rechange, la propriété
webkit-transform-style.
Opera et IE ne supportent pas la propriété transfom-style.
Définition et utilisation
La propriété transform-style spécifie comment les éléments imbriqués
seront rendus dans l'espace 3D.
Remarque : Cette propriété doit être utilisée conjointement avec
la propriété transform .
Pour mieux comprendre la propriété transform-style.
Exemple Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: #f0f;
transform: rotateY(45deg);
transform-origin:50% 50% 100px;
-webkit-transform: rotateY(70deg); /* Safari
et Chrome */
-webkit-transform-origin:50% 50% 100px; /*
Safari et Chrome */
-o-transform: rotateY(70deg); /* Opera
*/
-o-transform-origin:50% 50% 100px; /* Opera
*/
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: #ff0;
transform: rotateY(80deg);
transform-origin:40% 90% 10px;
-webkit-transform: rotateY(80deg); /* Safari
et Chrome */
-webkit-transform-origin:40% 90% 10px; /*
Safari et Chrome */
-o-transform: rotateY(80deg); /* Opera
*/
-o-transform-origin:40% 90% 10px; /* Opera
*/
}
</style>
<script>
function changeRotation(value)
{
document.getElementById('div2').style.transform="rotateY("
+ value + "deg)";
document.getElementById('div2').style.webkitTransform="rotateY("
+ value + "deg)";
document.getElementById('div2').style.MozTransform="rotateY("
+ value + "deg)";
document.getElementById('div2').style.OTransform="rotateY("
+ value + "deg)";
document.getElementById('persp').innerHTML=value +
"deg";
}
function fairePlat()
{
if
(document.getElementById("tf").checked==true)
{
document.getElementById('div2').style.webkitTransformStyle="preserve-3d";
document.getElementById('div2').style.transformStyle="preserve-3d"
}
else
{
document.getElementById('div2').style.webkitTransformStyle="flat";
document.getElementById('div2').style.TransformStyle="flat";
}
}
</script>
</head>
<body>
<p>Cocher puis décocher la case à cocher pour faire tourner
les éléments div, avec et sans la transformation de
style:</p>
<div id="div1">
<div id="div2"> BONJOUR je suis le div parent
<div id="div3"> <br>Div enfant </div>
</div>
</div>
webkit-transform-style: preserve-3d<input
type="checkbox" onchange="fairePlat()" id="tf"
/><br>
<br>
Rotation:<br>
<input type="range" min="-360" max="360"
value="70" onchange="changeRotation(this.value)"
/><br>
-webkit-transform: rotateY:(<span
id="persp">70deg</span>);
</body>
</html>
| Valeur par défaut : | plat |
| Héritée : | non |
| Version: | CSS3 |
| Syntaxe JavaScript : | .style.transformStyle de l'objet= "preserve-3d" |
Syntaxe
transform-style: flat|preserve-3d;
| Valeur | Description |
| flat | Les éléments enfants ne préserveront pas leurs positions 3D |
| preserve-3d | object.style.transformStyle="preserve-3d" |
Par carabde 10 mars 2014