The Fundamentals of 3D Layered Text

A client recently asked me to create a bulging text effect, a challenge I was excited to tackle. After considering JavaScript solutions and SVG filters, I recalled the concept of 3D layered text. With some advanced CSS techniques, I achieved a result I’m proud of.

This visually striking project is perfect for learning valuable CSS animation techniques, from layering fundamentals to advanced background-image tricks. We’ll also use a bit of JavaScript, but let’s focus on the basics first.

This article is the first in a three-part series. Here, we’ll focus on the core technique: building the layered 3D text effect from scratch using HTML and CSS, covering structure, stacking, indexing, and perspective.

In chapter two, we’ll add movement with animations, transitions, and visual variations to bring the layers to life.

In chapter three, we’ll introduce JavaScript to follow the mouse position and create a fully interactive version of the effect.

### The Method

Before diving into the text, let’s talk about 3D. CSS allows for wild three-dimensional effects, but it lacks depth. To build 3D structures in CSS, we have two main approaches: constructive and layered.

#### Constructive

The constructive method involves assembling flat elements like digital Lego bricks, each side of a shape getting its own element, positioned and rotated precisely in 3D space. This method allows for experimentation and creativity.

#### Layered

The layered method involves stacking multiple layers to create the illusion of depth. It’s perfect for text, 3D shapes, and UI elements, especially with round edges.

**Accessibility note:** Ensure additional and decorative layers are wrapped with `aria-hidden=”true”` to maintain accessibility.

### Creating a 3D Layered Text

We’ll start with a basic static example using “lorem ipsum” as a placeholder. We’ll create a container with a class of `.text`, containing the original text in a `span` and a `div` with a class of “layers” for the individual layers.

Now, we can build the layers, assigning indexes to each. We can use `:nth-child` in CSS or inline styles for this.

“`css
.layer {
&:nth-child(1) { –i: 1; }
&:nth-child(2) { –i: 2; }
&:nth-child(3) { –i: 3; }
}
“`

Or:

We’ll use the inline approach for simplicity.

**Pro tip:** Use Emmet in your IDE to generate layers quickly.

### Adding Content

Each layer needs to contain the original text. You can add the text as content in a pseudo-element or place it directly inside each layer.

“`css
.layer {
–text: “Lorem ipsum”;

&::before {
content: var(–text);
}
}
“`

Or:

### Let’s Position

We’ll stack the layers using `position: absolute` with `inset: 0` on `.layers` and `.layer`, ensuring they match the container’s size. Set the container to `position: relative`.

“`css
.text {
position: relative;

.layers, .layer {
position: absolute;
inset: 0;
}
}
“`

### Adding Depth

To add depth, move each layer along the z-axis and add perspective. Apply perspective at the parent level and use `transform-style: preserve-3d;` on each child.

“`css
.scene {
perspective: 400px;

* {
transform-style: preserve-3d;
}
}
“`

### Layer Separation

Define `–layers-count` and `–layer-offset` for layer spacing.

“`css
.text {
–layers-count: 24;
–layer-offset: 1px;
}
“`

Set `translateZ` for each layer using the index and spacing.

“`css
.layer {
transform: translateZ(calc(var(–i) * var(–layer