CSS 3D Transforms

CSS 3D transforms allow you to manipulate elements in a three-dimensional space. You can rotate, translate, and scale elements along the X, Y, and Z axes, creating depth and perspective effects. This tutorial will guide you through the basic 3D transform properties and their usage.

Common CSS 3D Transforms

  • Translate: Moves an element along the X, Y, and Z axes.
  • Scale: Changes the size of an element along the X, Y, and Z axes.
  • Rotate: Rotates an element around the X, Y, or Z axis.
  • Perspective: Defines the distance between the z-plane and the user.

Translate

The `translate3d` function moves an element along the X, Y, and Z axes. You can specify the distance to move in each direction. 


/* Translate Syntax */
transform: translate3d(, , );

Example: Translate


/* Translate Example */
.translate3d-example {
    transform: translate3d(100px, 50px, 200px);
}
This element is translated 100px to the right, 50px down, and 200px into the screen.

Scale

The `scale3d` function changes the size of an element along the X, Y, and Z axes. You can specify scale factors for each axis. 


/* Scale Syntax */
transform: scale3d(, , );

Example: Scale


/* Scale Example */
.scale3d-example {
    transform: scale3d(1.5, 1.5, 1.5);
}
This element is scaled 1.5 times its original size along all three axes.

Rotate

The `rotate3d` function rotates an element around a specified axis by a given angle. You can rotate around the X, Y, and Z axes. 


/* Rotate Syntax */
transform: rotate3d(, , , );

Example: Rotate


/* Rotate Example */
.rotate3d-example {
    transform: rotate3d(1, 1, 0, 45deg);
}
This element is rotated 45 degrees around the diagonal axis (X and Y).

Perspective

The `perspective` property defines the distance between the Z plane and the user, affecting the intensity of the 3D effect. It should be applied to the parent container to create a 3D perspective for its child elements. 


/* Perspective Syntax */
perspective: ;

Example: Perspective


/* Perspective Example */
.perspective-example {
    perspective: 500px;
}
This element has a perspective applied to it.