Skip to content

Transform Origins

The point from wence transformation occureth

Section titled “The point from wence transformation occureth”

Transforms don’t just happen — they pivot from a specific point.

Move that pivot, and the entire motion changes character.


Monkey rotating forward from top origin.

Pivot at the top → classic dropdown hinge.

.monkey {
transform-origin: top center;
transform: rotateX(45deg);
}

Monkey rotating like a door from the left edge.

Pivot on the left → perfect for card reveals.

.monkey {
transform-origin: center left;
transform: rotateY(-45deg);
}

Monkey rotating around bottom-right corner.

Pivot in the corner → dramatic motion with minimal rotation.

.monkey {
transform-origin: bottom right;
transform: rotateZ(25deg);
}

You can also use keywords:

transform-origin: top left;
transform-origin: bottom center;
transform-origin: right;

➡️ Next page: Assemblies — combining transforms in an orderly fashion.