CSS transform-origin Property

CSS transform-origin property specifies the position of the transform origin using x, y, and z coordinate values. A transform origin is a point around which the transformation takes place.

Hover over the below boxes to understand the transform-origin property:

Rotate Me
transform-origin: top left
Rotate Me
transform-origin: center
Rotate Me
transform-origin: bottom right

Example:

.div1{
    transform: rotate(20deg);
    transform-origin: top left;
}
.div2{
    transform: rotate(20deg);
    transform-origin: center;
}
.div3{
    transform:  rotate(20deg);
    transform-origin: bottom right;
}

We can specify the transform-origin in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. Percentage values(%) are also allowed. See the example below:

Example:

div{
  transform: rotate(20deg);
  transform-origin: 40px 40px;
}

CSS Syntax

The transform-origin property has the following syntax:

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

Property Values

The transform-origin property accepts the following valu es:

x-offsetSpecifies the horizontal position of the transform origin on the x-axis in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. The % values are also allowed. It can also accept keywords like ‘left’, ‘right’, ‘center’, etc.
y-offsetSpecifies the vertical position of the transform origin on the y-axis in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. The % values are also allowed. It can also accept keywords like ‘top’, ‘bottom’, ‘center’, etc.
z-offsetSpecifies the position of the transform origin on the z-axis in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initialSets the transform-origin property to its default value. which is 50% 50% 0.
inheritInherits the transform-origin property from its parent element.

General Info

Default Value50% 50% 0
InheritedNo
JavaScript Usageelement.style.transformOrigin = “center”