Skip to content
Related Articles

Related Articles

HTML | DOM Style transformOrigin Property

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 07 Jun, 2022

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!