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
Usage of transform-origin property with CSS
The CSS transform-origin property sets the point around which an element's transformation takes place. By default, transformations occur around the center of an element, but you can change this origin point to any position.
Syntax
selector {
transform-origin: x-axis y-axis z-axis;
}
Possible Values
| Value | Description |
|---|---|
x-axis |
Horizontal position: left, center, right, or percentage/length |
y-axis |
Vertical position: top, center, bottom, or percentage/length |
z-axis |
Z-axis position for 3D transformations (length value) |
Example: Transform Origin with Rotation
The following example demonstrates how transform-origin affects the rotation point of an element −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 50px;
position: relative;
}
.demo1 {
width: 300px;
height: 300px;
background-color: yellow;
padding: 50px;
margin-bottom: 20px;
}
.demo2 {
width: 200px;
height: 200px;
background-color: orange;
padding: 50px;
}
.demo3 {
width: 100px;
height: 100px;
background-color: blue;
color: white;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
transform-origin: 30% 40%;
}
</style>
</head>
<body>
<div class="container">
<h2>Transform Origin Example</h2>
<div class="demo1">
Yellow Container
<div class="demo2">
Orange Container
<div class="demo3">
Blue Box
</div>
</div>
</div>
</div>
</body>
</html>
Three nested containers appear with the innermost blue box rotated 45 degrees. The rotation occurs around a point that is 30% from the left and 40% from the top of the blue box, rather than from its center.
Example: Different Transform Origins
This example shows how different origin points affect the same rotation −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 80px;
height: 80px;
background-color: #4CAF50;
margin: 20px;
display: inline-block;
color: white;
text-align: center;
line-height: 80px;
transform: rotate(45deg);
}
.center { transform-origin: center; }
.top-left { transform-origin: top left; }
.bottom-right { transform-origin: bottom right; }
.custom { transform-origin: 20% 80%; }
</style>
</head>
<body>
<h3>Same Rotation, Different Origins</h3>
<div class="box center">Center</div>
<div class="box top-left">Top-Left</div>
<div class="box bottom-right">Bottom-Right</div>
<div class="box custom">20% 80%</div>
</body>
</html>
Four green boxes are displayed, each rotated 45 degrees but around different origin points. The first rotates around its center, the second around its top-left corner, the third around its bottom-right corner, and the fourth around a custom point at 20% from left and 80% from top.
Conclusion
The transform-origin property provides precise control over transformation behavior. Use keywords like center, top left for common positions, or percentage/length values for custom origin points.
Updated on: 2026-03-15T12:34:32+05:30
133 Views
Advertisements