Wireframe of a square tunnel receding into the page

3D in CSS

Planted: Jan 2023

Tended: Jul 2024

Status: decay

Intended Audience: Front-end developers

Create a 3D space

The perspective property enables a 3D-space for child elements. Its value determines the strength of a child's z-transform effect. Large perspective values cause small transformations, small values cause large transformations.

/index.css

.parent {
	perspective: 800px;
}

Vanishing point

perspective-origin defines the vanishing point. Its default value is
50% 50%. Centered horizontally and vertically.

/index.css

.parent {
	perspective: 800px;
	perspective-origin: 50% 50%;
}

Translate

translate3d(<x>, <y>, <z>):
<x> moves element horizontally
<y> moves element vertically
<z> moves element closer or further away. The strength of the effect is determined by the value of perspective.

/index.css

.parent {
	perspective: 800px;
	perspective-origin: 50% 50%;
}

.child {
	transform: translate3d(0px, 0px, -500px);
}

Scale

scale3d(<x>, <y>, <z>) resizes the element in 3D space.

/index.css

.parent {
	perspective: 800px;
	perspective-origin: 50% 50%;
}

.child {
	transform: scale3d(1, 1, 1);
}

Rotate

rotateX(...) rotates element around the x-axis
rotateY(...) rotates element around the y-axis
rotateZ(...) rotates element around the z-axis

/index.css

.parent {
	perspective: 800px;
	perspective-origin: 50% 50%;
}

.child {
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

All

/index.css

.parent {
	perspective: 800px;
	perspective-origin: 50% 50%;
}

.child {
	transform: 
		translate3d(0px, 0px, -500px) 
		scale3d(1, 1, 1)
		rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

preserve-3d

Below is an image containing three levels of elements:
.parent
.child
.grandChild

.parent provides the 3D space. .child and .grandChild transform when the button is clicked. As .grandChild isn't a direct descendant of .parent, it doesn't exist in the 3D-space. It's flattened to .child's plane. 3D transforms will have no effect. However, if we set transform-style: preserve-3d on .grandChild, it will be added to the space.

SVG children

Currently, 3D transforms aren't supported on SVG children.

Use cases

When a web page transitions from being displayed on a desktop to a mobile device, there is less screen realestate to work with. When this happens, it is common to remove lower-priority elements from the UI (User Interface). Rotating elements on the y-axis provides more screen realestate to work this. This allows more of the UI to remain on the screen when transitioning to smaller devices.

Drag the bottom-right corner of the list below. As the width gets smaller, the ul rotates on the y-axis. Providing more space for content to the right of the list.

This does come with a cost. The greater the rotation, the more readability is lost. However, we don't always need 100% readability. Graphic designer David Carson once designed numbers for the floors of a hotel. They would be the first thing a guest sees when stepping off the elevator. He created images that are a combination of the number and the word of the number (with missing letters) in unusual arrangements. His design isn't readable, but is understandable.

Other use cases:

▪ Unique menu layout
▪ Above the fold animation
▪ When explaining a process, to help the user maintain context when moving from 1 step to the next.
▪ A different approach to a presentation slide deck.
▪ To communicate complex architecture from big picture to low-level detail without overwhelming the user. Through the use of zoom to show / hide information.