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
Change the position on transformed elements with CSS
The CSS transform-origin property is used to change the position (origin point) from which transformations are applied to elements. By default, transformations like rotation, scaling, and skewing occur from the center of the element, but transform-origin allows you to specify a different reference point.
Syntax
selector {
transform-origin: x-axis y-axis z-axis;
}
Possible Values
| Value | Description |
|---|---|
x-axis |
Defines the position on the x-axis (left, center, right, %, px) |
y-axis |
Defines the position on the y-axis (top, center, bottom, %, px) |
z-axis |
Defines the position on the z-axis for 3D transformations (px) |
Example: Rotating with Custom Origin Point
The following example demonstrates how transform-origin changes where the rotation occurs −
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
width: 300px;
height: 300px;
background-color: yellow;
padding: 20px;
margin: 50px auto;
}
.demo2 {
width: 200px;
height: 200px;
background-color: orange;
padding: 20px;
}
.demo3 {
width: 100px;
height: 100px;
background-color: blue;
color: white;
transform: rotate(45deg);
transform-origin: 30% 40%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Transform Origin Demo</h1>
<div class="demo1">Outer Container
<div class="demo2">Middle Container
<div class="demo3">
Rotated
</div>
</div>
</div>
</body>
</html>
A nested container layout appears with a yellow outer box containing an orange middle box, which contains a blue box rotated 45 degrees. The blue box rotates around a point positioned at 30% from the left and 40% from the top of the element instead of its center.
Conclusion
The transform-origin property gives you precise control over the reference point for CSS transformations. This is particularly useful for creating custom rotation effects and animations where the default center point doesn't achieve the desired visual result.
Updated on: 2026-03-15T12:35:03+05:30
314 Views
Advertisements