HTML - DOM Style Object transformOrigin Property

Quiz

HTML DOM Style Object transformOrigin property allows user to change the position of transformed elements.

Syntax

Set the transformOrigin property:

object.style.transformOrigin= "x-axis y-axis z-axis | initial | inherit";

Get the transformOrigin property:

object.style.transformOrigin;

Property Values

Value	Description
x-axis	It specifies view placement at x-axis. Possible value of x-axis is mentioned below: length percentage left right center
y-axis	It specifies view placement at y-axis. Possible value of y-axis is mentioned below: length percentage top center bottom
z-axis	It specifies view placement at z-axis. Possible value of z-axis is mentioned below: length
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the transform-origin property of an element

Examples of HTML DOM Style Object 'transformOrigin' Property

The following examples set the transformOrigin property to div element.

Set transformOrigin property

The follwoing example sets the transformOrigin property of parent div element to right, left bottom and right top.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transformOrigin Property
    </title>
    <style>
        #transform {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid;
            margin: auto;
            background-color: azure;
        }
        #child1 {
            padding: 10px;
            position: absolute;
            height: 100px;
            width: 100px;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            opacity: 0.7;
        }
        #child2 {
            padding: 10px;
            height: 100px;
            width: 100px;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            transform: rotate(40deg);
        }
    </style>
</head>
<body>
    <p>
        Click to set transform Origin property.
    </p>
    <button onclick="fun()">Right</button>
    <button onclick="funTwo()">Left Bottom</button>
    <button onclick="funThree()">Right Top</button>
    <div id="transform">
        <div id="child1">Child1</div>
        <div id="child2">Child2</div>
    </div>
    <script>
        function fun() {
            document.getElementById("child2")
                .style.transformOrigin = "right";
        }  
        function funTwo() {
            document.getElementById("child2")
                .style.transformOrigin = "left bottom";
        }  
        function funThree() {
            document.getElementById("child2")
                .style.transformOrigin= "right top";
        }      
    </script>
</body>
</html>

Set transformOrigin Using 'length' and 'percentage'

The follwoing example sets the transformOrigin property of parent div element to length and percentage values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transformOrigin Property
    </title>
    <style>
        #transform {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid;
            margin: auto;
            background-color: azure;
        }
        #child1 {
            padding: 10px;
            position: absolute;
            height: 100px;
            width: 100px;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            opacity: 0.7;
        }
        #child2 {
            padding: 10px;
            height: 100px;
            width: 100px;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            transform: rotate(40deg);
        }
    </style>
</head>
<body>
    <p>
        Click to set transform Origin property.
    </p>
    <button onclick="fun()">Using length</button>
    <button onclick="funTwo()">length & percentage</button>
    <button onclick="funThree()">Using percentage</button>
    <div id="transform">
        <div id="child1">Child1</div>
        <div id="child2">Child2</div>
    </div>
    <script>
        function fun() {
            document.getElementById("child2")
                .style.transformOrigin = "20px 40px";
        }  
        function funTwo() {
            document.getElementById("child2")
                .style.transformOrigin = "5px 4%";
        }  
        function funThree() {
            document.getElementById("child2")
                .style.transformOrigin= "20% 10%";
        }      
    </script>
</body>
</html>

Supported Browsers

Property
transformOrigin	Yes 36	Yes 12	Yes 16	Yes 9	Yes 23

html_dom.htm

Print Page