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);
}

Try It Now

Example: Rotate (Rotate an Element)

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

Try It Now

Example: Scale (Resize an Element)

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

Try It Now

Example: Skew (Skew an Element)

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

Try It Now

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);
}

Try It Now

Example: Rotate in 3D

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

Try It Now

Example: Scale in 3D

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

Try It Now

3. Combining Multiple Transforms

You can combine multiple transformations in one property.

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

Try It Now

4. Transform Origin

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

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

Try It Now

Conclusion

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