CSS transform-origin

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.

  .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%;

<div class="transform">
  <div class="origin-marker"></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.

Browser support

This table shows when transform-origin support started for each browser.

transform (2D) transform (3D)
36.0 36.0
16.0 10.0
10.0 12.0
23.0 23.0
9.0 9.0

You may also like

Last updated on Sep 30, 2023