CSS transform-origin Property

Sets the specific pivot point or "anchor" for an element's transformations like rotation and scaling.

selector { transform-origin: x-axis y-axis z-axis; }
top Sets the origin point to the center of the top edge.
bottom Sets the origin point to the center of the bottom edge.
left Sets the origin point to the center of the left edge.
right Sets the origin point to the center of the right edge.
center Sets the origin point to the dead center of the element.
<length> Defines a specific distance from the top-left corner using units like px, em, or rem.
<percentage> Sets the origin relative to the width and height of the element box.

Code Examples

A basic example showing a box that rotates 45 degrees around its top-left corner when hovered.

<style>
.hinge-box {
  width: 100px;
  height: 100px;
  background: #2196f3;
  transform-origin: top left;
  transition: transform 0.5s;
}
.hinge-box:hover {
  transform: rotate(45deg);
}
</style>
<div class="hinge-box"></div>

An advanced example using JavaScript to dynamically update the transform-origin and apply a scale and rotation simultaneously.

<div id="card" style="width: 200px; height: 100px; background: #4caf50; transition: transform 0.6s;">Interactive Card</div>
<button onclick="changeOrigin()">Change Pivot</button>

<script>
function changeOrigin() {
  const el = document.getElementById("card");
  // Using JS to change origin to bottom right and trigger a scale
  el.style.transformOrigin = "bottom right";
  el.style.transform = "scale(1.2) rotate(10deg)";
  el.style.background = "#ff5722";
}
</script>

Pro Tip

You can create a realistic "swinging sign" or "door hinge" effect by setting the transform-origin to the top or side edge of an element. This is much cleaner than trying to calculate complex translations to mimic a hinge effect using the default center origin.

Deep Dive

Think of transform-origin like a pushpin in a piece of paper. If you pin the paper in the center and spin it, it rotates around the middle. If you move the pin to the top-left corner, the paper swings around that corner. By default, CSS pins your element at 50% 50% (the center). This property allows you to move that pin anywhere on the X, Y, and Z axes. When you use transform functions like rotate, scale, or skew, they will use this coordinate as the stationary point of the movement. Without changing this, everything scales or rotates from the center outward.

Best Practices

Stick to descriptive keywords like "top left" for simple UI elements to keep your CSS readable for other developers. Use percentages when building responsive components so the pivot point stays consistent regardless of the element's size. If you are doing 3D transforms, remember to define the Z-axis offset to control depth rotation.

Common Pitfalls

A common mistake is trying to use percentages for the Z-axis; the Z value must be a length unit like px. Also, keep in mind that changing the origin on an element that is already transformed will cause it to visually jump to a new position because the math for the transform is recalculated from the new point.

Accessibility

Animations involving rotation or scaling can trigger vestibular disorders or motion sickness. Always wrap your complex transforms in a media query for "prefers-reduced-motion" to respect user system settings. Ensure that your transformed elements do not block or obscure critical content when they move.

Dev Data Table: transform-origin property

default 50% 50% 0
animatable yes
inherited no
experimental no
year_intro 2009
year_standard 2012
js_syntax_1 element.style.transformOrigin = "50% 50%";
js_syntax_2 element.style.setProperty("transform-origin", "50% 50%");
js_note Ensure you set the origin before the transform is applied to prevent the element from jumping during execution.
browsers { "Chrome": 36, "Edge": 10, "Firefox": 16, "Safari": 9, "Opera": 23, "Chrome Android": 36, "Safari on iOS": 9, "Samsung Internet": 3, "Opera Mobile": 23 }
results render here...