Use the transformStyle property in JavaScript to set how nested elements are rendered in 3D space.
Example
You can try to run the following code to return how nested elements are rendered in 3D space with JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: 10px;
height: 200px;
width: 200px;
padding: 20px;
border: 2px solid blue;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateY(45deg);
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid BLUE;
background-color: green;
transform: rotateY(60deg);
}
#div4 {
padding: 110px;
position: absolute;
border: 2px solid BLUE;
background-color: red;
transform: rotateY(60deg);
}
</style>
</head>
<body>
<button onclick = "display()">Set</button>
<div id = "div1"> DIV1
<div id = "div2"> DIV2
<div id = "div3"> DIV3 </div>
<div id = "div4"> DIV4 </div>
</div>
</div>
<script>
function display() {
document.getElementById("div2").style.transformStyle = "preserve-3d";
}
</script>
</body>
</html>