CSS 3D Transforms

CSS 3D transforms allow you to move and rotate elements in 3D space. It creates a sense of depth and perspective on your web pages.

Interactive 3D Demo

Hover over the boxes to see them rotate in 3D space:

The 3D Methods

• rotateX(angle): Rotates the element around its horizontal axis.
• rotateY(angle): Rotates the element around its vertical axis.
• rotateZ(angle): Rotates the element around its depth axis.
• translate3d(x,y,z): Moves the element in X, Y, and Z directions.
• scale3d(x,y,z): Scales the element in three dimensions.

The perspective Property

Without the perspective property, 3D rotations appear flat or skewed. Perspective defines how far the object is from the user. A lower value creates a more extreme 3D effect.

.container {
    perspective: 500px; /* Crucial for 3D look */
}