Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 23 Apr, 2021

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 as origin. 

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 about 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






<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




<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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :