CSS Transformations (2D/3D)

Introduction

CSS transformations allow developers to manipulate elements in 2D and 3D space, enhancing visual effects without using images or JavaScript.

1. 2D Transformations

2D transformations modify elements on the X and Y axes using transform.

Translate (Move Elements)

div {
    transform: translate(50px, 100px);
}

Moves the element 50px right and 100px down.

Scale (Resize Elements)

div {
    transform: scale(1.5, 2);
}

Scales width by 1.5 and height by 2.

Rotate (Rotate Elements)

div {
    transform: rotate(45deg);
}

Rotates the element 45 degrees.

Skew (Slant Elements)

div {
    transform: skew(20deg, 10deg);
}

Skews the element by 20 degrees along the X-axis and 10 degrees along the Y-axis.

Multiple Transforms

div {
    transform: translate(50px, 50px) rotate(30deg) scale(1.2);
}

Combines multiple transformations.

2. 3D Transformations

3D transformations extend effects along the Z-axis.

Perspective

div {
    perspective: 500px;
}

Defines a depth effect for child elements.

Rotate in 3D

div {
    transform: rotateX(60deg);
}

Rotates the element 60 degrees along the X-axis.

Translate in 3D

div {
    transform: translate3d(50px, 50px, 100px);
}

Moves the element along X, Y, and Z axes.

3. Transform Origin

Controls the pivot point for transformations.

div {
    transform-origin: top left;
}

Conclusion

CSS transformations add dynamic visual effects, improving interactivity without performance loss.