CSS | transform-origin Property

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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(
                ) 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>

    chevron_right

    
    

    Output:
    values

    Example 2: Specifying the position in percentage

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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(
                ) 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>

    chevron_right

    
    

    Output:
    percentage

    Example 3: Specifying the position in keywords

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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(
                ) 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>

    chevron_right

    
    

    Output:
    keyword-value

  • initial: This is used to set the property to its default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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(
                ) 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>

    chevron_right

    
    

    Output:
    initial

  • inherit: This is used to inherit the property from its parent.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 proeprty of the parent */
                transform-origin: bottom left;
            }
              
            .box {
                position: absolute;
                border: 1px solid;
                background: url(
                ) 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>

    chevron_right

    
    

    Output:
    inherit

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


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.