CSS transform-origin Property

Last Updated : 04 Aug, 2023

The transform-origin property of CSS is used to specify the origin of the rotation of an element. It is the point at 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.
initial: This is used to set the property to its default value.
inherit: This is used to inherit the property from its parent.

Example 1: Specifying the position in length units

html

<!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://write.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: values

Example 2: Specifying the position in percentage

html

<!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://write.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:

percentage

Example 3: Specifying the position in keywords

html

<!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://write.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: keyword-value

Example: In this example, we are using transform-origin: initial property.

html

<!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://write.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: initial

Example: In this example, we are using the transform-origin: inherit property.

html

<!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://write.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>