Every HTML element has some position on the screen. This position is described using co-ordinate geometry using x-axis and y-axis. The HTML DOM Style transformOrigin Property used to change the position of an HTML div.
It helps in both 2D and 3D transformation.
Syntax:
- To set the transformOrigin property:
object.style.transformOrigin="x-value y-value"
- To return the transformOrigin property:
object.style.transformOrigin
- Return Values: It returns a string value that represents the transform-origin property of an element
- x-axis: Placed value of x-axis.
- y-axis: Placed value of y-axis.
- z-axis: placed value of z-axis in 3D.
- initial: Set default value of element.
- inherit: Inherit from its parent element
Example: Transform the origin of circle 2.
html
<!DOCTYPE html><html>
<head>
<title>
HTML | DOM Style transformOrigin Property
</title>
<script>
//the following script will find element
// whose id is circle2 and transform
//it's position to origin
function myFunction() {
document.getElementById(
"circle2").style.transformOrigin =
"0 0";
}
</script>
<style>
#circle1 {
height: 150px;
width: 150px;
margin: auto;
border: 1px solid black;
border-radius: 50%;
}
#circle2 {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: #0f9d58;
transform: rotate(45deg);
border-radius: 50%;
}
#circle3 {
position: absolute;
width: 150px;
height: 150px;
border: #0f9d58;
background-color: #0f9d58;
opacity: 0.5;
border-radius: 50%;
}
</style>
</head>
<body>
<button onclick="myFunction()">
Submit
</button>
<div id="circle1">
<div id="circle2"></div>
<div id="circle3"></div>
</div>
</body>
</html>
|
Output
- Before clicking on button:
- After clicking on button
Note: For safari used “WebkitTransformOrigin” instead of “transformOrigin”.
Supported Browsers: The browsers supported by HTML | DOM Style transformOrigin Property are listed below:
- Google Chrome
- Edge
- Firefox
- Opera