CSS 3D Transforms - Detailed Overview

Introduction to 3D Transforms

3D transforms in CSS allow you to manipulate elements in three-dimensional space. The main 3D transform functions include:

• rotate3d(): Rotates an element around a specified axis.
• translate3d(): Moves an element along the X, Y, and Z axes.
• scale3d(): Scales an element in three dimensions.
• perspective: Defines the perspective from which the 3D space is viewed.

Rotate3d

The rotate3d() function rotates an element around a specified axis. Here is an example:

.rotate3d { transform: rotate3d(1, 1, 0, 45deg); }

Translate3d

The translate3d() function moves an element along the X, Y, and Z axes. Here is an example:

.translate3d { transform: translate3d(50px, 50px, 50px); }

Scale3d

The scale3d() function scales an element in three dimensions. Here is an example:

.scale3d { transform: scale3d(1.5, 1.5, 1.5); }

Perspective

The perspective property defines the perspective from which the 3D space is viewed. Here is an example:

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