How to set the position of transformed elements with JavaScript?

JavascriptObject Oriented ProgrammingFront End Technology

In this tutorial, we will learn how to set the position of transformed elements with JavaScript.

When the state of an HTML element changes, the style sheet transform property is called. Elements may be rotated, skewered, moved, and scaled. It happens when the state of an element is changed, such as when you hover the mouse over a button or click it.

The transform-origin attribute determines where an element's transformations begin, and the transform-origin refers to the point around which a transformation is applied. For example, you can transform the origin of the rotate() function to the center of rotation.

This attributes effectively wraps a pair of translations around the element's other transformations. The initial translation shifts the transform-origin to the real origin, which is located at (0, 0). The additional transformations are then applied, and because the transform-origin is at (0, 0), they act about the transform-origin. Finally, the inverse translation is used to return the transform-origin to its original location.

Following are the methods used to set the position of transformed elements with JavaScript.

Using the transformOrigin axes roperty

To modify the location of transformed elements, the HTML DOM Style transformorigin property can be used.

The x-axis and y-axis of a 2D converted element can be changed. The z-axis of a 3D converted element can also be changed. This property should be used in concurrence with the transform property. The axes property specifies where the view is located along the x, y, and z axes.

Syntax

document.getElementById("div2").style.transformOrigin="-1 0 -2";

The div2 element is fetched using the getElementById() method and the style.transform-origin is set to -1 in the x-axis, 0 in the y-axis and, -2 in the y-axis.

Example

In this example, we've created three divisions and labelled them as div1, div2, and div3. The divs' dimensions are specified with position, margin, height, width, border, and padding. The divisions' background colors are set as orange and pink.

When the user presses the button, the location of transformed elements changes based on the x, y, and z axis values. The values are as follows: -1, 0,and -2. Because it transcends to the negative axis, the div2 element appears somewhat after the div3 element in the display.

<html> <head> <style> #div1 { position: relative; margin: auto; height: 100px; width: 100px; padding: 20px; border: 2px solid black; perspective: 50px; } #div2 { padding: 80px; position: absolute; border: 2px solid black; background-color: orange; transform: rotateX(20deg); } #div3 { padding: 50px; position: absolute; border: 2px solid black; background-color: pink; transform: rotateX(20deg); } </style> </head> <body> <h2> Set the position of transformed elements using <i> transformOrigin axes </i> property </h2> <p>Change the property of div in the figure</p> <button onclick="myFunction()"> Set Transform Origin Position </button> <div id="div1"> DIV1 <div id="div2"> DIV2 </div> <div id="div3"> DIV3 </div> </div> <script> function myFunction() { document.getElementById("div1").style.perspectiveOrigin="10px 5%"; document.getElementById("div2").style.transformOrigin="-1 0 -2"; } </script> </body> </html>

Using the transformOrigin initial property

Every HTML element has a specific location on the screen, and this location is specified using coordinate geometry, which includes the x-axis and y-axis. The transform-origin Property of the HTML DOM Style is used to modify the location of an HTML div. It is useful for both 2D and 3D transformation.

The location of converted items is obtained and set using the transform-origin attribute. The transformOrigin property is set to the default value in the initial position.

Syntax

document.getElementById("div2").style.transformOrigin="initial";

The getElementById() function is used to retrieve the div2 element. The value initial is assigned to the style.transform-origin property, which is the default value of the element.

Example

In this example, we've made three divisions and labeled them as div1, div2, and div3. The divs' dimensions are specified with position, margin, height, width, border, and padding. The divisions' background colors are set as orange and pink. When the user clicks the button, the position of transformed elements is adjusted based on the value of the elements' initial position in the divisions.

<html> <head> <style> #div1 { position: relative; margin: auto; height: 150px; width: 150px; padding: 20px; border: 2px solid blue; perspective: 50px; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateX(20deg); } #div3 { padding: 50px; position: absolute; border: 2px solid BLUE; background-color: green; transform: rotateX(20deg); } </style> </head> <body> <h3>Set the position of transformed elements using <i>transformOrigin initial</i> property </h3> <p>Change the property of div in the figure</p> <button onclick="myFunction()"> Set Transform Origin Position </button> <div id="div1"> DIV1 <div id="div2">DIV2</div> <div id="div3">DIV3</div> </div> <script> function myFunction() { document.getElementById("div1").style.perspectiveOrigin="20px 10%"; document.getElementById("div2").style.transformOrigin="initial"; } </script> </body> </html>

In this tutorial, we have learned about the two ways to set the position of transformed elements with JavaScript. The first way is to define the elements x, y, and z axis positions. The second way is to set the position concerning the div's initial condition.

raja
Updated on 06-Oct-2022 13:32:38

Advertisements