How to set a rotated element’s base placement in CSS ?
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:
Please Login to comment...