Transform Origin Property
Last updated: 2026-09-13
transform-origin Transform Origin Property
The transform-origin property sets the point — the origin — around which an element is transformed. The default is the center of the element (50% 50%), and rotations, scalings, and skews are all performed around this point. By adjusting the origin you can create very different effects, such as rotating around an edge or scaling from a corner.
| Category | |
|---|---|
| Initial Value | 50% 50% 0 |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
transform-origin: [<length> | <percentage> | left | center | right] [<length> | <percentage> | top | center | bottom] [<length>];⚙️ Values
| Value | Type | Description |
|---|---|---|
<length> | <percentage> | Type | The coordinates of the transform origin |
left | center | right | top | bottom | Keyword | A predefined position |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform-origin | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Supported in all major browsers | |||||
Tip： The third value (the Z-axis origin) only takes effect in 3D transforms and is usually combined with perspective; 2D transforms need only the first two values.
Tip： Keywords like left/center/right and top/center/bottom are more intuitive; use percentages or length values when you need precise control.
❓ FAQ
QWhy does my element seem to drift when it rotates around the center?
ABy default the transform origin sits at the geometric center of the element, so rotate spins around the center. To rotate around one of its corners or edges, move the origin there — for example, transform-origin: top left; makes the element rotate around its top-left corner, producing effects like a door swinging open or a fan blade.
QDoes the transform-origin property affect translation or translate?
ANo. translate moves the whole element and has nothing to do with the origin; the origin only affects transforms that happen around a point, such as rotate, scale, and skew. So in transform: translate(30px) rotate(45deg), the translation result is unaffected by transform-origin, but the visual center of the rotation and scaling follows the origin.
QWhat are the transform-origin percentage values relative to in CSS?
APercentages are computed against the element's own dimensions. 0% 0% is the top-left corner, 50% 50% is the center, and 100% 100% is the bottom-right corner — transform-origin: 100% 50% uses the middle of the right edge, for example. You can also use the left, center, right, top, and bottom keywords, or length values like px for precise positioning.
QCan transform-origin be used in 3D transforms? How does the third value work?
AYes. The first two values define the origin on the X/Y plane and the third (a length) sets the Z-axis origin, which defaults to 0. For example, transform-origin: 50% 50% -20px moves the origin 20px behind the element, giving rotateX a different sense of depth. In 3D scenes the parent element also needs a perspective for the effect to be visible.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
