Dolly Zoom
3D & Depth · Animated · pure CSS
The Hitchcock counter-zoom as an entrance: the crisp front word surges toward the camera through a real CSS perspective while a blurred echo copy recedes the opposite way and a vignette rushes outward, so the title seems to hold still as the whole set lurches. It settles as a big crisp word over a faint deep echo — hover replays the vertigo hit. Tune zoom depth, echo opacity, duration and vignette strength.
How it works
Dolly Zoom is an animated 3d & depth text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Dolly Zoom exposes 5 dedicated controls — Hue, Zoom Depth, Echo Opacity, Duration and Vignette — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Dolly Zoom — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Syne', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Syne', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
.text-effect {
position: relative;
display: inline-block;
perspective: 640px;
}
.text-effect .fx-front {
position: relative;
display: inline-block;
color: hsl(66 24% 94%);
transform-origin: 50% 55%;
backface-visibility: hidden;
will-change: transform, opacity;
animation: text-effect-dz-front 1.2s cubic-bezier(.2,.66,.28,1) both;
}
.text-effect .fx-echo {
position: absolute;
inset: 0;
color: hsl(66 40% 74%);
transform-origin: 50% 55%;
pointer-events: none;
will-change: transform, opacity, filter;
animation: text-effect-dz-echo 1.2s cubic-bezier(.2,.66,.28,1) both;
}
.text-effect .fx-vignette {
position: absolute;
inset: -0.9em -1.8em;
background: radial-gradient(135% 155% at 50% 46%, transparent 32%, hsl(66 45% 4% / 0.648) 100%);
transform-origin: 50% 46%;
pointer-events: none;
will-change: transform, opacity;
animation: text-effect-dz-vig 1.2s cubic-bezier(.2,.66,.28,1) both;
}
.text-effect:hover .fx-front {
animation-name: text-effect-dz-front-r;
}
.text-effect:hover .fx-echo {
animation-name: text-effect-dz-echo-r;
}
.text-effect:hover .fx-vignette {
animation-name: text-effect-dz-vig-r;
}
@keyframes text-effect-dz-front {
0% { opacity: 0; transform: translateZ(0px); }
18% { opacity: 1; }
70% { transform: translateZ(154px); }
100% { opacity: 1; transform: translateZ(133px); }
}
@keyframes text-effect-dz-front-r {
0% { opacity: 0; transform: translateZ(0px); }
18% { opacity: 1; }
70% { transform: translateZ(154px); }
100% { opacity: 1; transform: translateZ(133px); }
}
@keyframes text-effect-dz-echo {
0% { opacity: 0.45; transform: translateZ(0px) translateY(0em); filter: blur(0.4px); }
100% { opacity: 0.41; transform: translateZ(-320px) translateY(-0.34em); filter: blur(4px); }
}
@keyframes text-effect-dz-echo-r {
0% { opacity: 0.45; transform: translateZ(0px) translateY(0em); filter: blur(0.4px); }
100% { opacity: 0.41; transform: translateZ(-320px) translateY(-0.34em); filter: blur(4px); }
}
@keyframes text-effect-dz-vig {
0% { opacity: 0; transform: translateZ(-1px) scale(1.26); }
26% { opacity: 1; }
100% { opacity: 1; transform: translateZ(-1px) scale(0.92); }
}
@keyframes text-effect-dz-vig-r {
0% { opacity: 0; transform: translateZ(-1px) scale(1.26); }
26% { opacity: 1; }
100% { opacity: 1; transform: translateZ(-1px) scale(0.92); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Animated
- Browser support
- perspective + translateZ counter-zoom with a blurred receding echo (all modern browsers)
- Capabilities
- pure