HTML & CSS Interview Question #114

What is the CSS transform property?

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

Quick Interview Answer

transform changes the visual coordinate system of an element with operations such as translate, scale, rotate, and skew. Multiple transform functions can be combined in one declaration.

Detailed Explanation

transform changes the visual coordinate system of an element with operations such as translate, scale, rotate, and skew. Multiple transform functions can be combined in one declaration.

Transforms generally affect visual rendering without changing the normal-flow space reserved for the element. This makes them useful for animation and visual adjustments, but transformed elements can also create stacking contexts and affect containing-block behavior in some cases.

Code Example

.card:hover {
    transform:
        translateY(-4px)
        scale(1.02);
}

.icon {
    transform: rotate(15deg);
}