CSS transform-origin Property

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.

Example

#

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>

Syntax

transform-origin: x-axis y-axis z-axis | 
                  initial | inherit;

Values

#

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)
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

You may also like

Guides