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: The supporting concepts are explained in CSS Transform and CSS Animations.

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
transform-style	36	12	16	9

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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