/

HTML / CSS / JavaScript Tutorial

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">&nbsp;</div>
</div></div>
<div class="a"><div class="b1">Element with property set by HTML
  <div class="c">&nbsp;</div>
</div></div>
<div class="a"><div id="b2">Element with property set by JavaScript
  <div class="c">&nbsp;</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


Desktop view | Switch to Mobile