Motion and Variations in 3D Layered Text

In the last chapter, we created a static 3D layered text effect using only HTML and CSS. It looked impressive but lacked movement. Now, we’re going to change that.

This chapter focuses on animating the effect, adding transitions, and experimenting with variations. We’ll explore how motion can enhance depth and how subtle changes can create a new atmosphere.

3D Layered Text Series:

1. The Basics
2. Motion and Variations (you’re here!)
3. Interactivity and Dynamism (coming August 22)

⚠️ Motion Warning: This article contains animations that may include flashing or fast visuals. Proceed with caution if sensitive to motion.

‘Counter’ Animation

We’ll begin with a simple animation tip for layered 3D text. You might want to rotate the element without altering the text’s orientation. Achieve this by combining rotations on two axes: rotate on the z-axis, tilt on the x-axis, then rotate back on the z-axis.

“`css
@keyframes wobble {
from { transform: rotate(0deg) rotateX(20deg) rotate(360deg); }
to { transform: rotate(360deg) rotateX(20deg) rotate(0deg); }
}
“`

This approach maintains the text’s original orientation while adding a tilt, creating a wobble effect that highlights depth.

To enhance this, combine the wobble with a floating effect by animating the `.layers` slightly along the z-axis:

“`css
.layers {
animation: hover 2s infinite ease-in-out alternate;
}

@keyframes hover {
from { transform: translateZ(0.3em); }
to { transform: translateZ(0.6em); }
}
“`

For a more realistic effect, keep the original span in place as a shadowed anchor, make its color transparent, and animate its `text-shadow`:

“`css
span {
color: transparent;
animation: shadow 2s infinite ease-in-out alternate;
}

@keyframes shadow {
from { text-shadow: 0 0 0.1em #000; }
to { text-shadow: 0 0 0.2em #000; }
}
“`

Syncing these animations enhances realism.

Splitting Letters

The animation looks better now, but the word moves as one. Can we animate each letter independently? Yes, but it requires more elements, which can affect performance. Limit the number of animated letters and layers.

In the next example, I reduced the layer count to sixteen. There are five letters, and to place them side by side, I applied `display: flex` to the `.scene` and added a small delay to each letter using `:nth-child`.

New Angles

We’ve been moving the text along the z-axis, but we can go further. Each layer can move or rotate in any direction, and by basing transformations on the `–n` variable, we can create interesting effects. Here are a few examples:

1. Shifting effect using `translateX`.
2. Sloping effect with y-axis rotation.
3. Tilting effect with x-axis rotation.
4. Rotating effect with z-axis rotation.

Layer Delay

Separate layers allow animation tweaks and individual `animation-delay` adjustments, leading to unique effects. Consider this pulsing example:

“`css
.layeredText {
animation: pulsing 2s infinite ease-out;
}

@keyframes pulsing {
0%, 100% { scale: 1; }
20% { scale: 1.2; }
}
“`

Applying animation to each layer with a slight delay creates a more engaging effect:

“`css
.layer {
–delay: calc(var(–n) * 0.3s);
}

:is(span, .layer) {
animation: pulsing 2s var(–delay, 0s) infinite ease-out;
}
“`

Pseudo Decorations

Previously, I mentioned using pseudo elements for decoration. This technique is worth exploring. Add pseudo elements to each layer, position them, and the 3D effect is ready. From outlines to playful shapes like arrows, the possibilities are endless.

Use `:nth-child` to target specific layers when the decoration overlaps with text to avoid readability issues.

You can animate pseudo elements too. How about a 3D “Loading” text with a built-in spinner?

I made changes to achieve this. First, I selected twelve layers from the middle using `.layer:nth-child(n + 6):nth-child(-n + 18)`. Second, I added a blur filter to the span’s pseudo element for a shadow effect.

Face Painting

You can add visual interest without pseudo elements by styling text with a custom pattern using `background-image`. Select the top layer with `:last-child`, set its color to `transparent`, and use `background-clip: text`.