Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How nested elements are rendered in 3D space with JavaScript?
This tutorial will teach how the nested elements are rendered in 3D space with JavaScript.
You may use the transform property to skew, scale, translate, or rotate an element. It alters the visual formatting model's coordinate space. The transform property can take the keyword value none or one or more transform function values. For several function values, rotate must be mentioned first. Because with the in-order (left to right) multiplication in the transform functions, composite transforms can be applied in the opposite direction, i.e., right to the left.
The nested elements are rendered in 3D space using the HTML DOM Style transformation-style property. The transform-style property determines whether, in the 3D space, an element's children are positioned or flattened in the element's plane. The element's offspring will not exist independently in 3D space if it is flattened. Because this attribute is not inherited, it must be set for the element's non-leaf descendants. Along with the transform property, this property should be used in conjunction.
Following are the methods to use nested elements rendered in 3D space with JavaScript.
Using the transformStyle Property
The transformStyle property specifies whether an element's children are positioned in 3D space or flattened concerning the element's plane. It is usually utilized for nesting transforms. That is, it may be used to preserve the three-dimensional space of an element that has been altered in the three-dimensional space of its parent.
The 'preserve-3d' value allows child elements to preserve their 3D position. The transform-style attribute is not passed down. As a result, you should apply it to any descendants whose offspring you want to change into three-dimensional space.
Syntax
document.getElementById("div2").style.transformStyle = "preserve-3d";
The div2 element is fetched using the getElementById() method, and the transform-style property is changed to preserve-3d.
Example
In this example, the div2 element has a transform style property in the <style> section, which is user defined to flat. This property is the default value of the elements in the 3D space. The HTML DOM Style transform-style property changes this to preserve-3d. This property helps to preserve the 3D nature of the elements.
<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 are rendered in 3D space using <i> preserve-3d </i> value </h2> <button onclick="myFunction()">Set</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() Attribute
To change an existing property in the declaration block, use the setProperty() function. It is a necessary parameter that holds a string that denotes the property name that has to be set. The string that represents the new value is contained in the value, an optional argument.
As the name implies, the flat value will flatten the components into their parent's plane, preventing them from being positioned along the z-axis. The 'transform' property transforms an element in the third dimension. This supports the 'perspective' property for setting the perspective in z-space and the 'backface-visibility' property for displaying the reverse side of a 3D-transformed element.
Syntax
var x = document.getElementById("div2").style;
x.setProperty("transform-style", "flat");
The getElementById() function is used to fetch the div2 element. Using the setProperty attribute, the CSS property is set to transform style whose value is given as flat.
Example
In this example, we have created divisions that represent the 3D transformation of a block. The element div2 is fetched, and the property of transformation of nested elements rendered in 3D space is converted to flat, preventing the elements from being positioned along the z-axis by flattening them into their parent's plane.
<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 are rendered in 3D space using <i>setProperty()</i> property </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()"> Set property </button> <!-- Script to set the property --> <script> function myFunction() { var x = document.getElementById("div2").style; x.setProperty("transform-style", "flat"); } </script> </body> </html>
In this tutorial, we learned how the nested elements are rendered in 3D space using preserve-3d value and flat value of transform style property in JavaScript.
105 Views
