CssHow-ToBeginner · 3 min read

How to Use transform-origin in CSS: Simple Guide with Examples

The transform-origin CSS property sets the point around which a transformation is applied, like rotation or scaling. You specify it using keywords (e.g., center, top left) or length values (e.g., 50% 50%, 10px 20px). This changes where the element appears to pivot during the transform.

📐

Syntax

The transform-origin property accepts one or two values that define the horizontal and vertical origin point for transformations.

One value: sets both horizontal and vertical to the same (e.g., center means center center).
Two values: first is horizontal (left, center, right, or length), second is vertical (top, center, bottom, or length).
Values can be keywords or lengths/percentages.

css

transform-origin: center;
transform-origin: left top;
transform-origin: 25% 75%;
transform-origin: 10px 20px;

💻

Example

This example shows a square rotating around different transform-origin points. The first rotates around the center, the second around the top left corner.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>transform-origin Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #4a90e2;
    margin: 20px;
    display: inline-block;
    transition: transform 0.5s ease;
  }
  .center-origin:hover {
    transform-origin: center;
    transform: rotate(45deg);
  }
  .top-left-origin:hover {
    transform-origin: top left;
    transform: rotate(45deg);
  }
</style>
</head>
<body>
  <div class="box center-origin" tabindex="0" aria-label="Blue square rotating around center">Hover or focus me (center origin)</div>
  <div class="box top-left-origin" tabindex="0" aria-label="Blue square rotating around top left">Hover or focus me (top left origin)</div>
</body>
</html>

Output

Two blue squares side by side. When you hover or focus the left square, it rotates 45 degrees around its center. When you hover or focus the right square, it rotates 45 degrees around its top-left corner, causing a different pivot effect.

⚠️

Common Pitfalls

People often forget that transform-origin changes the pivot point but does not move the element itself. Also, using incorrect values or forgetting units for lengths can cause unexpected results.

Another mistake is assuming the default origin is always the center; it actually defaults to 50% 50% but can behave differently with inline elements.

css

/* Wrong: missing units for length */
transform-origin: 10 20; /* Invalid, must be 10px or 10% */

/* Correct: with units */
transform-origin: 10px 20px;

📊

Quick Reference

Value	Description
center	Center of the element (default)
top left	Top-left corner of the element
bottom right	Bottom-right corner of the element
50% 50%	Center using percentage coordinates
10px 20px	10 pixels from left, 20 pixels from top
inherit	Inherits the value from parent element

✅

Key Takeaways

Use transform-origin to set the pivot point for CSS transforms like rotate and scale.

Specify origin with keywords (e.g., center, top left) or precise lengths/percentages.

Always include units (px, %) when using length values to avoid errors.

Default origin is center (50% 50%), but you can change it to create different transform effects.

Remember transform-origin affects pivot point, not the element's position itself.