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.
Quick 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);
}Quick facts
Initial value
50% 50% 0Inherited
No
Applies to
transformable elements
Animation type
simpleListOfLpc
Values
leftcenterrighttopbottom 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.
Safe to use without fallbacks.
36+
16+
9+
12+