2D & 3D Transforms in CSS

CSS transforms allow you to visually manipulate elements by rotating, scaling, translating, or skewing them. You can apply transformations in both 2D and 3D space using the transform property.

1. 2D Transforms

translate(x, y) – moves the element
rotate(angle) – rotates the element
scale(x, y) – resizes the element
skew(x-angle, y-angle) – skews the element


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

2. 3D Transforms

3D transforms add depth to the element using the Z-axis. Make sure to set the perspective for the parent container.


.scene {
    perspective: 1000px;
}

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

3. Transform Origin

Controls the pivot point of the transform:


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

4. Combining Transforms

You can combine multiple transforms in one rule:


.box {
    transform: scale(1.1) translateX(20px) rotateZ(10deg);
}

5. Hardware Acceleration Tip

Use transform: translateZ(0); to trigger GPU acceleration and smoother animations:


.card {
    transform: translateZ(0);
}

Conclusion

CSS 2D and 3D transforms provide powerful ways to enhance layouts and animations. Use them to rotate, scale, move, and skew elements with creativity and control.

← Previous: Keyframe Animations Next: Media Queries →