CSS Property transform-style
The transform-style property determines if
that element's children are positioned in 3D space, or flattened.
Summary
- Initial value
- flat
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.transformStyle="preserve-3d"
- Animatable
- no
CSS Syntax
transform-style: flat|preserve-3d;
Property Values
- flat
- Default value. The child elements will NOT preserve its 3D position.
- preserve-3d
- The child elements will preserve its 3D position.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
transform-style |
36.0 (12.0 -webkit-) | 11.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<style>
.wrap {<!--from w ww.ja va 2 s . c om-->
position: relative;
height: 200px;
width: 200px;
margin: 10px auto;
background: transparent;
perspective: 600;
}
.parent {
margin: 10px;
width: 150px;
height: 150px;
background-color: aquamarine;
transform-style: preserve-3d;
transform: rotateY(245deg);
}
.parent > div {
position: absolute;
top: 30px;
left: 30px;
width: 150px;
height: 150px;
box-sizing: border-box;
}
.one {
background-color: goldenrod;
transform: translateZ(-100px) rotateY(55deg);
}
.two {
background-color: red;
transform: translateZ(50px) rotateX(40deg);
transform-origin: 50% top;
}
</style>
</head>
<body>
<div class="wrap">
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
</body></html>