CSS Transform

The transform property in CSS allows you to modify an element’s shape, position, and orientation in both **2D and 3D space**.

1. 2D Transformations

CSS provides several 2D transformations:

• translate(x, y): Moves an element along the X and Y axis.
• rotate(angle): Rotates an element.
• scale(x, y): Resizes an element.
• skew(x-angle, y-angle): Skews an element.

Example: Translate (Move an Element)

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

Example: Rotate (Rotate an Element)

.box {
    transform: rotate(45deg);
}

Example: Scale (Resize an Element)

.box {
    transform: scale(1.5, 1.5);
}

Example: Skew (Skew an Element)

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

2. 3D Transformations

For 3D effects, we use perspective and **transform functions** like rotateX(), rotateY(), and rotateZ().

Example: Adding Perspective

.container {
    perspective: 500px;
}

.box {
    transform: rotateX(45deg);
}

Example: Rotate in 3D

.box {
    transform: rotateX(30deg) rotateY(45deg);
}

Example: Scale in 3D

.box {
    transform: scale3d(1.5, 1.2, 1);
}

3. Combining Multiple Transforms

You can combine multiple transformations in one property.

.box {
    transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

4. Transform Origin

The transform-origin property sets the point from which transformations are applied.

.box {
    transform: rotate(45deg);
    transform-origin: top left;
}

Conclusion

CSS **2D and 3D transformations** help in creating **visually engaging animations**. Experiment with different transform properties to achieve amazing effects!