CSS Property: transform-style
[this page | pdf | back links]
The CSS (CSS3) transform-style property indicates how
nested elements are to be rendered for 3D purposes when using the transform
property.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
flat
|
(default value). Child
elements do not preserve their 3D position
|
|
preserve-3d
|
Child elements preserve
their own 3D position
|
|
Default Value:
|
flat
|
|
JavaScript syntax:
|
e.g. object.style.transformStyle="preserve-3d"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div.a {width: 180px; height: 80px; border: thin solid green; margin: 30px; position: relative; padding: 20px;}
div.b {background-color: orange; border: 3px solid blue; position: absolute; height: 50px; padding: 10px;
transform: rotateY(45deg);}
div.b1 {background-color: orange; border: 3px solid blue; position: absolute; height: 50px; padding: 10px;
transform: rotateY(45deg); transform-style: preserve-3d;}
div.c {background-color: yellow; border: thin solid red; padding: 10px;
transform: rotateY(-45deg);}
</style>
</head>
<body>
<div class="a"><div class="b">Element with default property
<div class="c"> </div>
</div></div>
<div class="a"><div class="b1">Element with property set by HTML
<div class="c"> </div>
</div></div>
<div class="a"><div id="b2">Element with property set by JavaScript
<div class="c"> </div>
</div></div>
<script>
var x = document.getElementById("b2");
x.style = "background-color: orange; border: 3px solid blue; position: absolute; height: 50px; padding: 10px; transform: rotateY(45deg);";
x.style.transformStyle = "preserve-3d";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyTransformStyle() {
var x = document.createElement("DIV"); x.style.transformStyle = "preserve-3d"; return (window.getComputedStyle(x, null).transformStyle == "preserve-3d");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties