The transform-origin property defines the origin of the transformation.
The origin is the reference point for the transformation calculations.
By default, the origin is located at (0,0), or (0,0,0) for 3D transformations.
A rotated <div> element with an origin at the left center.
The origin is marked with a red circle.
<style>
.transform {
width: 100px;
height: 200px;
margin: 10px 80px 40px;
position: relative;
transform: rotate(25deg);
transform-origin: left center;
background-color: lightblue;
}
.origin-marker {
position: absolute;
top: 45%;
height: 10px;
width: 10px;
background-color: red;
border-radius: 50%;
}
</style>
<div class="transform">
<div class="origin-marker"></div>
</div>
transform-origin: x-axis y-axis z-axis |
initial | inherit;
| Value | Description |
|---|---|
x-axis |
Sets the x value for the origin. Possible values are left, right, center, length, and %. |
y-axis |
Sets the y value for the origin. Possible values are top, center, bottom, length or %. |
z-axis |
Sets the z value for the origin in 3D transformations. Possible values are length or %. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when transform-origin support started for each browser.
| transform (2D) | transform (3D) | |
|---|---|---|
 Chrome
|
36.0 | 36.0 |
 Firefox
|
16.0 | 10.0 |
 IE/Edge
|
10.0 | 12.0 |
 Opera
|
23.0 | 23.0 |
 Safari
|
9.0 | 9.0 |
