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
Rotate Me
Rotate Me
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-offset | Specifies 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-offset | Specifies 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-offset | Specifies the position of the transform origin on the z-axis in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. |
| initial | Sets the transform-origin property to its default value. which is 50% 50% 0. |
| inherit | Inherits the transform-origin property from its parent element. |
General Info
| Default Value | 50% 50% 0 |
| Inherited | No |
| JavaScript Usage | element.style.transformOrigin = “center” |
