transform-origin
Sets the anchor point for a transform. For example, if you rotate a square, 'transform-origin' decides if it spins around its center, one of its corners, or even a point outside the square entirely.
It is documented as part of the CSS Transforms specification.
Syntax
/* Usage Example */
.door {
/* Fixes the 'hinge' point to the left side so the door opens correctly when rotated */
transform-origin: left center;
transition: transform 0.5s;
}
.door:hover{
transform: perspective(600px) rotateY(-45deg);
}
/* Syntax */
transform-origin: left;
transform-origin: center;
transform-origin: right;
transform-origin: top;
transform-origin: bottom;
/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;transform-origin Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
36+
16+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more