How to set the perspective on how 3D elements are viewed with JavaScript?

JavascriptObject Oriented ProgrammingFront End Technology

In this tutorial, we will learn how to set the perspective on how 3D elements are viewed with JavaScript.

The Division tag is another name for the div tag. In HTML, on a web page, the div tag is used to create content divisions. For example: images, header, text, navigation bar, footer, etc. The div tag has both an opening (<div>) and a closing (</div>) tag, and closing the tag is required. The div tag is the most commonly used in web development because it allows us to separate data in web pages and create specific sections for specific data or functions.

The perspective attribute sets the distance between the z=0 plane and the user to provide perspective to a 3D-positioned element.

With the z<0 shrinks, every 3D element with z>0 becomes larger. While every 3D element with z<0 becomes smaller. The value of this characteristic determines the strength of the effect. Large perspective values result in a little transformation; tiny perspective values result in a large change.

Parts of the 3D components behind the user are not rendered (their z-axis coordinates are larger than the value of the perspective parameter). By default, the vanishing point is put at the center of the element, but its location may be altered with the perspectiveorigin attribute.

Following are the methods used to set the perspective on how 3D elements are viewed with JavaScript.

Using the Style perspective Property

In HTML DOM, the Style perspective attribute determines how far an element is located from the Z plane. It displays a 3D view of an element. The length specifies the distance between the element and the view.

You may use the transform CSS property to scale, skew, rotate or translate an element. It alters the CSS visual formatting model's coordinate space.

The transform property can take the keyword value none or one or more <transformfunction> values. If there are several function values, perspective() must be stated first.

Syntax

document.getElementById("div1").style.perspective = "180px";

The div1 element is fetched using the getElementById() method, and the length of the perspective is set to 180px, which shows how far the element is set from the view.

Example

In this example, we create 3 divisions and named them div1, div2, and div3, respectively. The dimensions of the divs are provided with position, margin, height, width, and padding, respectively. The background colors of the divisions are specified as sky blue and violet. When the user clicks the button, the length of the perspective is changed from 100 px to 180 px.

<html> <head> <style> #div1 { position: relative; margin: auto; height: 150px; width: 150px; padding: 20px; border: 2px solid brown; perspective: 100px; } #div2 { padding: 80px; position: absolute; border: 2px solid brown; background-color: skyblue; transform: rotateX(45deg); } #div3 { padding: 50px; position: absolute; border: 2px solid brown; background-color: violet; transform: rotateX(30deg); } </style> </head> <body> <h2> Set the perspective on how 3D elements are viewed using <i> perspective length </i> property </h2> <p>Change the property of div in the figure</p> <button onclick="myFunction()"> Set Perspective </button> <div id="div1"> DIV1 <div id="div2"> DIV2 </div> <div id="div3"> DIV3 </div> </div> <script> function myFunction() { document.getElementById("div1").style.perspective="180px"; } </script> </body> </html>

Using the Perspective initial Property

The position attribute determines how an element is placed in a document. The attributes top, right, bottom, and left define the ultimate positioning of positioned items.

When the position is set to absolute, the element is removed from the usual document flow, and there is no space in the page layout for it. It is positioned relative to its nearest ancestor if one exists; otherwise, it is positioned relative to the first contained block.

The child element receives perspective instead of the parent element when the perspective attribute is defined. Hence, as a result, the value specifies how near the child is to the Z plane. When the perspective attribute is set to initial, the element is returned to its initial position.

Syntax

document.getElementById("div1").style.perspective="initial";

The div1 element is collected using the getElementById() function, and the perspective length is set to initial, which returns this property to its default value.

Example

In this example, we've made three divisions and labelled them div1, div2, and div3. The divs' measurements are specified with position, margin, height, width, and padding. The divisions' background colors are defined as sky blue and violet. The length of the perspective is modified from 50px to its original state of a 2D figure when the user presses the button.

<html> <head> <style> #div1 { position: relative; margin: auto; height: 150px; width: 150px; padding: 20px; border: 2px solid brown; perspective: 50px; } #div2 { padding: 80px; position: absolute; border: 2px solid brown; background-color: skyblue; perspective: 50px; transform: rotateX(20deg); } #div3 { padding: 50px; position: absolute; border: 2px solid brown; background-color: violet; perspective: 50px; transform: rotateX(20deg); } </style> </head> <body> <h3> Set the perspective on how 3D elements are viewed using <i> perspective initial </i> property</h3> <p>Change the property of div in the figure</p> <button onclick="myFunction()"> Set Perspective </button> <div id="div1">DIV1 <div id="div2"> DIV2 </div> <div id="div3"> DIV3 </div> </div> <script> function myFunction() { document.getElementById("div1").style.perspective="initial"; } </script> </body> </html>

In this tutorial, we learned how to set the perspective on how the 3D elements are viewed with JavaScript using the Perspective initial property and the perspective length property.

raja
Updated on 06-Oct-2022 13:26:23

Advertisements