🎯 CSS transform-origin Property

The transform-origin property defines the point from which CSS transformations are applied to an element. It determines the origin point used when an element is rotated, scaled, skewed, or transformed in 3D space.

By default, transformations occur from the center of the element. However, with transform-origin, you can move this reference point to any location inside or outside the element.

The default transformation origin is:

transform-origin: 50% 50% 0;
                

This means all transformations are performed from the exact center of the element.

The property can accept up to three values:

• x → Horizontal position
• y → Vertical position
• z → Depth position used in 3D transformations

You can specify an exact position using CSS length units such as px, em, rem, or other supported units.

.box {
    transform-origin: 20px 30px;
}
                

In this example, transformations use the point located 20px from the left and 30px from the top as the origin.

Percentage values are calculated relative to the element's width and height.

.box {
    transform-origin: 0% 100%;
}
                

This moves the transformation origin to the bottom-left corner of the element.

CSS also provides predefined keywords for common positions.

.box {
    transform-origin: left top;
}
                

Common keywords include: left, center, right, top, and bottom.

When working with 3D transformations, a third value can be added to control the depth axis.

.box {
    transform-origin: center center 50px;
}
                

The third value moves the transformation origin along the Z-axis.

Resets the property to its default value.

.box {
    transform-origin: initial;
}
                

The following example rotates an element from its top-left corner instead of its center.

.box {
    width: 150px;
    height: 150px;
    background: #6ea8ff;

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

Because the origin is positioned at the top-left corner, the element rotates around that point instead of the center.

The transform-origin property gives you complete control over how transformations behave. It is especially useful when creating animations, interactive effects, rotating menus, image galleries, and advanced 3D interfaces.

• Control the center point of transformations
• Create realistic rotation effects
• Improve CSS animations
• Build advanced 3D interfaces
• Create custom visual effects