HTML & CSS Interview Question #115

What is transform-origin?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

transform-origin specifies the point around which a transform is applied. The default is typically the center of the element, but the origin can be moved using keywords, lengths, or percentages.

Detailed Explanation

transform-origin specifies the point around which a transform is applied. The default is typically the center of the element, but the origin can be moved using keywords, lengths, or percentages.

It is especially noticeable with rotation and scaling because changing the origin changes the apparent pivot point.

Code Example

.menu-icon {
    transform-origin: top left;
    transition: transform .2s ease;
}

.menu-icon.open {
    transform: rotate(90deg);
}