CSS transform-origin Property

What You’ll Learn

The transform-origin property sets the pivot point for CSS transforms — controlling where rotation, scaling, and skewing appear to happen.

Introduction

The transform-origin property in CSS is used to change the position of the origin of a transformation. By default, transformations like rotate, scale, and skew are performed around the center of an element.

The transform-origin property allows you to adjust this point to a different location within the element.

Definition and Usage

Use transform-origin when the default center pivot does not look right — for example, a door swinging from a hinge on the left, or an icon scaling from the bottom edge.

📝 Syntax

The syntax for the transform-origin property is straightforward. You can specify one, two, or three values to set the origin point along the x-axis, y-axis, and z-axis.

element {
  transform-origin: x-axis y-axis z-axis;
}

• x-axis — Defines where the transformation’s x-origin is located.
• y-axis — Defines where the transformation’s y-origin is located.
• z-axis (optional) — Defines where the transformation’s z-origin is located.

Basic Example

.box {
  transform-origin: top left;
  transform: rotate(45deg);
}

Syntax Rules

• One value sets x; y defaults to center.
• Two values set x and y. Keywords or lengths are allowed.
• Three values add a z-axis origin for 3D transforms.
• Must be paired with a transform to see a visual effect.
• The property is not inherited.

Related Properties

• transform — applies the actual rotation, scale, or skew
• perspective — adds depth for 3D transform origins
• transform-style — preserves 3D space for child elements
• transition — animates transform changes smoothly

🎯 Default Value

The default value of the transform-origin property is 50% 50% 0, which means the transformation is performed around the center of the element along the x and y axes, with no offset along the z-axis.

💎 Property Values

The transform-origin property accepts lengths, percentages, and keywords.

When to Use transform-origin

transform-origin matters whenever the pivot point changes the visual effect:

• Door or panel animations — Rotate from left center like a hinge.
• Dropdown menus — Scale from top center so they expand downward.
• Loading spinners — Keep center for symmetric rotation.
• Card flip effects — Set z-origin for 3D flip animations.

Examples Gallery

In this example, we’ll change the transform origin of a square to the top left corner and rotate it by 45 degrees.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform-origin: top left;
    transform: rotate(45deg);
  }
</style>

<div class="box"></div>

.center-spin {
  transform-origin: center;
  transform: rotate(45deg);
}

.corner-spin {
  transform-origin: top left;
  transform: rotate(45deg);
}

.panel {
  transform-origin: bottom center;
  transform: scaleY(1.2);
}

.diamond {
  transform-origin: 50% 100%;
  transform: rotate(45deg);
}

♿ Accessibility

• Reduced motion — Respect prefers-reduced-motion when animating transforms tied to origin changes.
• Do not disorient users — Extreme rotations from corner origins can feel jarring on large UI blocks.
• Keep controls predictable — Interactive elements should transform in ways users expect (e.g., buttons scaling from center).
• Test focus visibility — Transformed elements may shift focus rings unexpectedly.

transform-origin + transform

Always set transform-origin together with a transform function. The origin defines where; the transform defines what happens.

.door {
  transform-origin: left center;
  transform: rotateY(-75deg);
  transition: transform 0.4s ease;
}

💡 Best Practices