Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set a rotated element’s base placement in CSS ?
The CSS transform-origin property allows you to control the base placement (anchor point) of rotated elements. By default, elements rotate around their center, but you can change this to any point to achieve different visual effects.
Syntax
selector {
transform: rotate(angle);
transform-origin: x-position y-position;
}
Transform-Origin Values
| Value | Description |
|---|---|
center |
Default - rotates around the center point |
top left |
Rotates around the top-left corner |
bottom right |
Rotates around the bottom-right corner |
50% 0% |
Uses percentages for precise positioning |
20px 10px |
Uses pixel values for exact positioning |
Example 1: Default Center Rotation
This example shows a square rotating around its center point (default behavior)
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 2px solid #ccc;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 80px;
height: 80px;
background-color: #ff6b6b;
transform: rotate(45deg);
/* transform-origin: center; (default) */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
A red square rotated 45 degrees around its center point, appearing as a diamond shape within a gray bordered container.
Example 2: Top-Left Corner Rotation
This example demonstrates rotating the element around its top-left corner
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 2px solid #ccc;
margin: 50px auto;
position: relative;
}
.box {
width: 80px;
height: 80px;
background-color: #4ecdc4;
transform: rotate(30deg);
transform-origin: top left;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
A teal square rotated 30 degrees around its top-left corner, creating a fan-like rotation effect from that anchor point.
Example 3: Bottom-Right Corner Rotation
This example shows rotation around the bottom-right corner for comparison
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 2px solid #ccc;
margin: 50px auto;
position: relative;
}
.box {
width: 80px;
height: 80px;
background-color: #45b7d1;
transform: rotate(-45deg);
transform-origin: bottom right;
position: absolute;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
A blue square rotated -45 degrees around its bottom-right corner, pivoting from that corner as the fixed anchor point.
Conclusion
The transform-origin property is essential for controlling how elements rotate in CSS. By changing the anchor point from the default center to corners or custom positions, you can create more precise and visually appealing rotation effects for your web designs.
Updated on: 2026-03-15T16:36:09+05:30
3K+ Views
Advertisements