CSS3 3D Transforms

CSS 3D Transforms

Introduction to 3D Transforms

CSS 3D transforms extend 2D transforms by allowing you to manipulate elements in three-dimensional space, adding depth and perspective.

You can rotate elements around the X, Y, or Z axes, and translate them along the Z-axis (towards or away from the viewer).

Compare 2D vs 3D rotation (imagine hovering over examples):

2D Rotate (Flat Spin)
3D Rotate (Tilted Spin)

Browser Support for 3D Transforms

3D transforms are well-supported in modern browsers. Vendor prefixes might be needed for some older versions but are generally unnecessary now.

Property	Internet Explorer	Chrome	Firefox	Safari	Opera
transform (3D functions)	IE 10+	Chrome	Firefox 10+	Safari	Opera
perspective	IE 10+	Chrome	Firefox 16+	Safari	Opera
transform-style	IE 11+	Chrome	Firefox 16+	Safari	Opera
backface-visibility	IE 10+	Chrome	Firefox 16+	Safari	Opera

Creating a 3D Space

To enable a true 3D context for child elements, you need to apply properties to the parent container:

• perspective: Defines the strength of the perspective effect (how ‘deep’ the 3D space appears). Lower values mean more extreme perspective. Applied to the parent. Example: perspective: 1000px;.
• perspective-origin: Sets the vanishing point position for the perspective effect. Default is center center. Applied to the parent.
• transform-style: preserve-3d;: Allows child elements positioned in 3D space to maintain their 3D positions relative to each other. Applied to the parent (or any element containing 3D-transformed children).

Without these parent properties, 3D transforms on children might appear ‘flattened’.

Common 3D Transform Functions

These are applied using the transform property on the element you want to manipulate:

• rotateX(angle): Rotates the element around the horizontal X-axis.
• rotateY(angle): Rotates the element around the vertical Y-axis.
• rotateZ(angle): Rotates the element around the Z-axis (similar to 2D rotate).
• rotate3d(x, y, z, angle): Rotates around a custom 3D vector.
• translateZ(distance): Moves the element along the Z-axis (closer or further).
• translate3d(x, y, z): Moves the element in 3D space.
• scaleZ(factor): Scales the element along the Z-axis.
• scale3d(x, y, z): Scales the element in 3D space.
• matrix3d(...): Combines all 3D transforms using a 4x4 matrix.

The rotateX() Method

Rotates an element around its horizontal axis, like flipping it forwards or backwards.

[Imagine an element tilting forward]

Example: Rotate 60 degrees around the X-axis.

.container {
  perspective: 500px; /* Needed for visible 3D effect */
}

.target-element {
  transform: rotateX(60deg);
}

The rotateY() Method

Rotates an element around its vertical axis, like opening a door.

[Imagine an element spinning like a revolving door]

Example: Rotate -45 degrees around the Y-axis.

.container {
  perspective: 500px;
}

.target-element {
  transform: rotateY(-45deg);
}

The rotateZ() Method

Rotates an element around the axis perpendicular to the screen (same as 2D rotate()).

[Imagine an element spinning flat on the screen]

Example: Rotate 90 degrees around the Z-axis.

.target-element {
  transform: rotateZ(90deg); /* No perspective needed to see this */
}

The backface-visibility Property

Determines if the ‘back’ side of an element is visible when it’s rotated to face away from the viewer.

• visible (default): The back face is shown (often mirrored).
• hidden: The back face is hidden, making the element invisible when facing away.

Example: Hide element when rotated 180 degrees on Y-axis.

.card {
  transform-style: preserve-3d; /* If card has front/back faces */
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

CSS 3D Transform Properties Summary

Property	Description
transform	Applies a 2D or 3D transformation to an element.
transform-origin	Changes the position of the origin point for transformations.
transform-style	Specifies how nested elements are rendered in 3D space (flat or preserve-3d). Applied to parent.
perspective	Sets the perspective depth for 3D transforms. Applied to parent.
perspective-origin	Sets the vanishing point position. Applied to parent.
backface-visibility	Defines whether the back face of an element is visible when rotated (visible or hidden).

3D Transform Functions

Function	Description
matrix3d(…)	Defines a 3D transformation using a 4x4 matrix of 16 values.
translate3d(x,y,z)	Defines a 3D translation.
translateX(x)	Defines translation along the X-axis (same as 2D).
translateY(y)	Defines translation along the Y-axis (same as 2D).
translateZ(z)	Defines translation along the Z-axis.
scale3d(x,y,z)	Defines a 3D scale transformation.
scaleX(x)	Defines scale along the X-axis (same as 2D).
scaleY(y)	Defines scale along the Y-axis (same as 2D).
scaleZ(z)	Defines scale along the Z-axis.
rotate3d(x,y,z,angle)	Defines a 3D rotation around a custom vector.
rotateX(angle)	Defines a 3D rotation along the X-axis.
rotateY(angle)	Defines a 3D rotation along the Y-axis.
rotateZ(angle)	Defines a 3D rotation along the Z-axis (same as 2D rotate).
perspective(n)	Defines a perspective view directly on the element (less common than applying perspective to parent).