CSS Animations & Transitions

CSS 3D Transform

CSS 3D Transform allows you to transform elements in a three-dimensional space using the X, Y, and Z axes.

Unlike 2D transforms, which work only horizontally and vertically, 3D transforms add depth, enabling realistic visual effects such as:

Card flips
3D rotations
Cube effects
Interactive UI components
Modern animations

CSS 3D transformations are widely used in advanced web interfaces and interactive designs.

Syntax

3D Transform Syntax

css

selector {
    transform: function(value);
}

3D Transform Example

css

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

Rotates the element 45 degrees along the Y-axis.

Attributes

Function	Description	Example
rotateX()	Rotates around X-axis	rotateX(45deg)
rotateY()	Rotates around Y-axis	rotateY(45deg)
rotateZ()	Rotates around Z-axis	rotateZ(45deg)
translateZ()	Moves element along Z-axis	translateZ(50px)
perspective	Creates depth effect	perspective: 800px;

Example

CSS 3D Transform Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS 3D Transform Example</title>
    <style>
        .container {
            perspective: 800px;
        }
        .box {
            width: 150px;
            height: 150px;
            background-color: lightblue;
            margin: 50px;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Output

Browser Output

css

A light blue box will appear
The box will be rotated in 3D along the Y-axis
The perspective property will create a sense of depth
The element will appear tilted in three-dimensional space

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

Notes

Rotate Along X-Axis

css

transform: rotateX(45deg);

Tilts the element forward or backward.

Rotate Along Y-Axis

css

transform: rotateY(45deg);

Rotates the element left or right.

Rotate Along Z-Axis

css

transform: rotateZ(45deg);

Similar to normal 2D rotation.

Move Along Z-Axis

css

transform: translateZ(100px);

Moves the element closer to the viewer.

Add Perspective

css

.container {
    perspective: 1000px;
}

Creates a realistic depth effect.

Understanding the Axes

3D Axes Overview

css

          Y
          up
          |
          |
          |
          +---------> X
         /
        /
       Z

X-axis -> Left <-> Right rotation
Y-axis -> Side-to-side rotation
Z-axis -> Depth movement

Common 3D Transform Functions

Function	Effect
rotateX()	Rotate forward/backward
rotateY()	Rotate left/right
rotateZ()	Rotate in place
translateZ()	Move closer/farther
perspective	Add depth

Conclusion

CSS 3D Transform extends the capabilities of standard transformations by introducing depth and three-dimensional movement. Using properties such as rotateX(), rotateY(), translateZ(), and perspective, you can create immersive and visually engaging effects that enhance modern web interfaces.

PreviousCSS 2D Transform NextCSS Transitions