What is the purpose of transform-origin in CSS?

The transform-origin property in CSS is used to specify the point around which a transformation is applied. This point acts as the pivot for transformations such as rotate, scale, and skew. By default, the transformation origin is set to the center of the element, but you can change it to any point using values like percentages or specific lengths.

Syntax

transform-origin: x-axis y-axis z-axis;

Example

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transform-origin: top left; /* Changes the pivot point to the top left corner */
    transition: transform 0.5s;
}

.box:hover {
    transform: rotate(45deg); /* Rotates the box around the top left corner */
}

In this example, when you hover over the .box, it will rotate around its top left corner instead of its center.