Skip to main content

CSS 3D Transforms

CSS 3D Transforms are a set of properties that allow you to transform elements in 3D space. They can be used to create 3D effects such as rotating an element in 3D space or creating a 3D perspective.

Here are some of the most common CSS 3D Transform properties:

The transform-style: preserve-3d property​

This property allows child elements to preserve their 3D position relative to their parent element.

As an example:

Editor

Loading...

In this example:

  • The .parent element is set to transform-style: preserve-3d to preserve the 3D position of its child elements.
  • The .child element is translated 50 pixels away from the screen using translateZ(50px).

The transform: translate3d(x, y, z) property​

This property allows you to move an element in 3D space. You can specify the amount of movement in pixels, percentages, or other units.

As an example:

Editor

Loading...

In this example:

  • The .box element is translated 100 pixels to the right, 50 pixels down, and 20 pixels away from the screen.

The transform: rotate3d(x, y, z, angle) property​

This property allows you to rotate an element in 3D space around an axis specified by the x, y, and z values. You can use degrees, radians, or other units to specify the angle.

As an example:

Editor

Loading...

In this example:

  • The .box element is rotated 45 degrees around the x-axis using rotate3d(1, 0, 0, 45deg).

The transform: scale3d(x, y, z) property​

This property allows you to resize an element in 3D space. You can specify the scaling factor as a decimal or percentage.

As an example:

Editor

Loading...

In this example:

  • The .box element is scaled to twice its original size in the x-direction, stays the same in the y-direction, and scaled down to half its original size in the z-direction.

Perespective​

This property creates a 3D perspective for the parent element, allowing you to control the depth of the 3D space.

As an example:

Editor

Loading...

In this example:

  • The .parent element is given a perspective of 1000px to create a 3D perspective.
  • The .child element is translated 50 pixels away from the screen using translateZ(50px).

The perspective-origin property​

This property allows you to specify the point around which the 3D space is viewed.

As an example:

Editor

Loading...

In this example:

  • The .parent element is given a perspective of 1000px and a perspective-origin of 50% 50% (the center of the element) to create a 3D perspective.
  • The .child element is translated 50 pixels away from the screen using translateZ(50px).