CSS 2D Transforms

CSS 2D transforms allow you to manipulate elements in two-dimensional space. You can rotate, scale, translate, and skew elements to create various effects. This tutorial will guide you through the basic 2D transform properties and their usage.

Common CSS 2D Transforms

• Translate: Moves an element from its original position.
• Scale: Changes the size of an element.
• Rotate: Rotates an element around a fixed point.
• Skew: Distorts an element along the X or Y axis.

Translate

The `translate` function moves an element from its original position. You can specify the distance to move along the X and Y axes.

/* Translate Syntax */
transform: translate(, );

        

/* Translate Example */
.translate-example {
    transform: translate(50px, 100px);
}

            

Scale

The `scale` function changes the size of an element. You can scale along the X and Y axes by specifying scale factors.

/* Scale Syntax */
transform: scale(, );

        

/* Scale Example */
.scale-example {
    transform: scale(1.5, 1.5);
}

            

Rotate

The `rotate` function rotates an element around a fixed point. You can specify the angle of rotation.

/* Rotate Syntax */
transform: rotate();

        

/* Rotate Example */
.rotate-example {
    transform: rotate(45deg);
}

            

Skew

The `skew` function distorts an element along the X or Y axis. You can specify the angle to skew.

/* Skew Syntax */
transform: skew(, );

        

/* Skew Example */
.skew-example {
    transform: skew(20deg, 10deg);
}