css - 2D Transforms Part 3: Scaling Elements

The scale() function resizes elements proportionally or non-proportionally.

Examples and Explanation

Uniform Scaling

.scale {

    transform: scale(1.5);

}

Explanation: The element is scaled up 1.5 times in both width and height.

Non-Uniform Scaling

.scale-nonuniform {

    transform: scale(2, 0.5);

}

Explanation: The element is doubled in width and reduced to half its height.

Single-Axis Scaling

.scale-x {

    transform: scaleX(1.2);

}

.scale-y {

    transform: scaleY(0.8);

}

Explanation: Use scaleX() or scaleY() for resizing along a specific axis.

Use Case: Scaling is used for zoom effects, emphasizing elements, or creating responsive designs.