Open In App

How to set a rotated element’s base placement in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to set a rotated element’s base placement in CSS. This can be used to rotate an element from a certain point to its origin. Here we use the transform-origin property. The CSS transform-origin property defines the origin point around which an element is transformed or rotated.

Approach: We will use the transform-origin property to set the base placement of a rotating element. This property can be 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 but in this article, we will use 2D rotations.

Syntax:

transform-origin: position

Example 1: In this example, we specify the position in length units.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .outer {
            margin: 50px;
            border: 1px double;
 
            /* This makes outer div relative so that
      inner div on move according to user input */
            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;
 
            /* Rotate image by 15 degrees */
            transform: rotate(15deg);
 
            /* Transforms image from initial position
      to 15px left and 40px from top */
            transform-origin: 15px 40px;
        }
    </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: In this example, we specify the position in percentage.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .outer {
            position: relative;
            height: 100px;
            width: 250px;
            margin: 50px;
            padding: 5px;
            border: 2px solid lightgreen;
        }
 
        .box {
            padding: 18px;
            position: absolute;
            border: 1px solid lightgreen;
            background-color: green;
 
            /* Rotate image by 30 degrees */
            transform: rotate(30deg);
 
            /* Transforms image from initial
                      position to 30% from the left and
                      40% from the top */
            transform-origin: 30% 40%;
        }
    </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">
            Welcome to GeeksforGeeks
        </div>
    </div>
</body>
</html>


Output:



Last Updated : 05 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads