transform-origin

The transform-origin property sets the point around which transforms — rotate, scale, skew — are applied. By default it is the element's centre (50% 50%).

Syntax

Accepts up to three values: transform-origin: x y z. Values can be keywords (top, center, bottom, left, right), percentages, or lengths.

Effect on Rotation

Changing the origin to a corner creates a "door hinge" rotation. Moving it outside the element creates an orbiting effect.

Effect on Scale

Scale from a corner anchors that corner while the element grows or shrinks away from it.

Example

/* Default — rotates from centre */
.spinner {
    transform-origin: center;
    animation: spin 1s linear infinite;
}

/* Hinge door — rotate from left edge */
.door {
    transform-origin: left center;
    transition: transform 0.5s ease;
}
.door:hover {
    transform: perspective(600px) rotateY(-60deg);
}

/* Scale from top-left corner */
.grow-from-corner {
    transform-origin: top left;
    transition: transform 0.3s ease;
}
.grow-from-corner:hover {
    transform: scale(1.15);
}

/* Orbit — origin outside the element */
.planet {
    transform-origin: 0 200px; /* 200px below the element */
    animation: orbit 4s linear infinite;
}
@keyframes orbit {
    to { transform: rotate(1turn); }
}

/* Underline expand from left */
.underline::after {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.underline:hover::after {
    transform: scaleX(1);
}

CSS

Full Editor

Pro Tip

The expanding underline effect — where a line grows from left to right on hover — uses transform-origin: left with transform: scaleX(0) to scaleX(1). This is far more performant than animating width because it stays on the compositor.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned