CSS | transform-origin Property - GeeksforGeeks

06 Nov, 2019
The transform-origin property of CSS is used to specify the origin of rotation of an element. It is the point about which an element is rotated. It can be used for both 2D and 3D rotations.
Syntax:
transform-origin: position | initial | inherit
Property Values:
position: This specifies the position of the origin of rotation. It takes 3 values corresponding to the distance from the left edge of the box, the distance from the top edge of the box and the z-axis of rotation.The values could be specified in length units, percentages or keywords. The z-axis value is always specified using length units.Example 1: Specifying the position in length units<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: 10px 30px;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is used to set      the origin of the element's transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>Output:Example 2: Specifying the position in percentage<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: 50% 75%;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is       used to set the origin of the element's      transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>Output:Example 3: Specifying the position in keywords<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: bottom left;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is       used to set the origin of the element's      transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>Output:
The values could be specified in length units, percentages or keywords. The z-axis value is always specified using length units.
Example 1: Specifying the position in length units
<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: 10px 30px;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is used to set      the origin of the element's transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>
Output:
Example 2: Specifying the position in percentage
<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: 50% 75%;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is       used to set the origin of the element's      transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>
Output:
Example 3: Specifying the position in keywords
<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: bottom left;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is       used to set the origin of the element's      transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>
Output:
initial: This is used to set the property to its default value.Example:<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: initial;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is      used to set the origin of the element's      transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>Output:
Example:
<!DOCTYPE html><html>  <head>    <style>        .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            transform-origin: initial;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is      used to set the origin of the element's      transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>
Output:
inherit: This is used to inherit the property from its parent.Example:<!DOCTYPE html><html>  <head>    <style>        /* this acts as the parent */                  .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;            /* set the property of the parent */            transform-origin: bottom left;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            /* inherits the property of the parent */            transform-origin: inherit;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is used to set      the origin of the element's transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>Output:
Example:
<!DOCTYPE html><html>  <head>    <style>        /* this acts as the parent */                  .outer {            margin: 50px;            border: 1px dotted;            position: relative;            height: 100px;            width: 400px;            background-color: lightgreen;            /* set the property of the parent */            transform-origin: bottom left;        }                  .box {            position: absolute;            border: 1px solid;            background: url("https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"            ) no-repeat;                        background-size: cover;            height: 100px;            width: 400px;            transform: rotate(15deg);            /* inherits the property of the parent */            transform-origin: inherit;        }    </style></head>  <body>    <h1>CSS transform-origin Property</h1>    <p>The CSS transform-origin Property is used to set      the origin of the element's transformation</p>    <div class="outer">        <div class="box"></div>    </div></body>  </html>
Output:
Supported Browsers: The browser supported by transform-origin property are listed below:
Chrome 35.0
Internet Explorer 10.0
Firefox 16.0
Safari 9.0
Opera 23.0
shubham_singh
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript