Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How nested elements are rendered in 3D space with JavaScript?
This tutorial demonstrates how to control the 3D rendering of nested HTML elements using JavaScript and the CSS transform-style property.
The transform-style property determines whether child elements are positioned in 3D space or flattened to their parent's plane. When working with 3D transformations like rotateY(), rotateX(), or rotateZ(), this property controls how nested elements maintain their 3D positioning relative to their parent container.
Transform-Style Property Values
The transform-style property accepts two main values:
- flat (default): Child elements are flattened to the parent's plane, losing their 3D positioning
- preserve-3d: Child elements maintain their 3D positioning in the parent's 3D space
Using the transformStyle Property
The transformStyle property allows you to dynamically change how nested elements are rendered in 3D space. Setting it to "preserve-3d" enables child elements to maintain their individual 3D transformations.
Syntax
document.getElementById("elementId").style.transformStyle = "preserve-3d";
Example
This example shows nested divs with 3D rotations. Initially, the transform-style is set to "flat" in CSS, but clicking the button changes it to "preserve-3d" to show the 3D effect:
<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);
transform-style: flat;
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid blue;
background-color: orangered;
transform: rotateY(60deg);
}
#div4 {
padding: 110px;
height: 50px;
position: absolute;
border: 2px solid blue;
background-color: red;
transform: rotateY(60deg);
}
</style>
</head>
<body>
<h2>Nested elements rendered in 3D space using <i>preserve-3d</i> value</h2>
<button onclick="myFunction()">Set to Preserve 3D</button>
<div id="div1"> DIV1
<div id="div2"> DIV2
<div id="div3"> DIV3 </div>
<div id="div4"> DIV4 </div>
</div>
</div>
<script>
function myFunction() {
document.getElementById("div2").style.transformStyle = "preserve-3d";
}
</script>
</body>
</html>
Using the setProperty() Method
The setProperty() method provides an alternative way to modify the transform-style property dynamically. This method allows you to set CSS properties programmatically with specific property names and values.
Syntax
var element = document.getElementById("elementId").style;
element.setProperty("transform-style", "flat");
Example
This example starts with preserve-3d enabled, but clicking the button flattens the 3D structure by setting transform-style to "flat":
<html>
<head>
<style>
#div1 {
position: relative;
margin: 40px;
height: 210px;
width: 220px;
padding: 20px;
border: 3px solid brown;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid brown;
background-color: skyblue;
transform: rotateY(45deg);
transform-style: preserve-3d;
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid brown;
background-color: blue;
transform: rotateY(55deg);
}
#div4 {
padding: 110px;
position: absolute;
border: 2px solid brown;
background-color: blueviolet;
transform: rotateY(70deg);
}
</style>
</head>
<body>
<h2>Nested elements rendered in 3D space using <i>setProperty()</i> method</h2>
<div id="div1"> DIV1
<div id="div2"> DIV2
<div id="div3"> DIV3 </div>
<div id="div4"> DIV4 </div>
</div>
</div>
<br><br><br><br>
<button onclick="myFunction()">Flatten to 2D</button>
<script>
function myFunction() {
var x = document.getElementById("div2").style;
x.setProperty("transform-style", "flat");
}
</script>
</body>
</html>
Key Points
- The
transform-styleproperty is not inherited by child elements - You must apply it to each parent element whose children need 3D positioning
- Use
preserve-3dto maintain 3D transformations in nested elements - Use
flatto flatten child elements to the parent's plane - Both direct property assignment and
setProperty()method work for dynamic changes
Conclusion
The transform-style property is essential for controlling 3D rendering of nested elements. Use preserve-3d to maintain 3D transformations and flat to create 2D layouts from 3D-transformed elements.
244 Views
