CSS Transform Origin Playground - Online Visual Pivot

The transform-origin property defines the pivot point around which a CSS transform (like rotate, scale, or skew) is applied. By default, this point is at the center of the element (50% 50%). Changing it allows you to control where the transformation "anchors" — for example, making an element rotate around its top-left corner instead of its center.

Percentage values are relative to the element's own bounding box. 0% 0% refers to the top-left corner, 50% 50% is the center, and 100% 100% is the bottom-right corner. The X-axis runs horizontally (left to right), and the Y-axis runs vertically (top to bottom). You can also use values beyond 0–100% (like -20% or 120%) to place the origin outside the element.

CSS provides intuitive keywords: top, bottom, left, right, and center. You can combine them like top left (equivalent to 0% 0%), center right (100% 50%), or bottom center (50% 100%). The default is center center which equals 50% 50%.

Rotation is the most visually dramatic use case. With transform-origin: center center, an element spins in place like a wheel. Move the origin to top left, and the element swings like a door hinged at that corner. This is especially useful for animations like opening doors, swinging pendulums, or creating orbit effects.

Yes! You can set values like -50% or 150% to position the origin outside the element's bounding box. This creates orbital effects where the element rotates around a distant point, or scales from an external anchor. It's a powerful technique for advanced animations and creative UI effects.

The default value is 50% 50% (or center center). This means all transformations — rotate, scale, skew — pivot around the exact center of the element unless you specify otherwise. This is the most intuitive default for general use cases.

Absolutely. For 3D transforms like rotateX(), rotateY(), and perspective(), the transform-origin property accepts a third Z-axis value (e.g., transform-origin: 50% 50% 100px). This controls the depth pivot point, enabling complex 3D animations and parallax effects.

Set transform-origin on the element before defining @keyframes. The origin remains constant throughout the animation. For dynamic origin changes during animation, you'd need to include transform-origin inside the keyframe steps — though browser support for animating this property is limited. Consider using multiple elements or JavaScript for complex origin-shifting animations.

transform-origin has excellent browser support — it works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera, as well as IE10+. For mobile, it's supported on iOS Safari and Android Chrome. Just remember to use vendor prefixes (-webkit-, -moz-) if you need to support very old browser versions.

Common use cases include: animated hamburger menu icons (rotating lines from their ends), card flip animations (pivoting from the edge), modal/dialog zoom-in effects (scaling from a specific corner), clock hand animations (rotating from one end), drawer/sidebar open effects, and image hover zoom where you want the zoom to originate from the cursor position.