CSS3 La propriété transform-style

...

Les propriétés CSS

Exemple: Laissez les éléments enfants transformées à préserver les transformations 3D :

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

Internet Explorer Firefox Opera Google Chrome Safari
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.

Sélectionner 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"

Sommaire

Par carabde 10 mars 2014

CSS3 La propriété transform-style

Les propriétés CSS par ordre alphabétique

...

Exemple: Laissez les éléments enfants transformées à préserver les transformations 3D :

La méthode secrète likes sans fin sur Facebook