CSS 3D Transform

Written by Swapnil RajaUpdated 30 Jul 2026

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

PreviousCSS 2D Transform NextCSS Transitions

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

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;

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>

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

3D Axes Overview

css

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

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

CSS 3D Transform

Syntax

Attributes

Example

Browser Support

Notes

Rotate Along X-Axis

Rotate Along Y-Axis

Rotate Along Z-Axis

Move Along Z-Axis

Add Perspective

Understanding the Axes

Common 3D Transform Functions

Conclusion

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