Scroll Flip
3D & Depth · Animated · pure CSS
A slab of text hinged through its centre that the reader flips by scrolling: it enters tipped toward you, stands dead upright and legible at mid-viewport, then tips away as it leaves the top. Brightness dims and a soft ground shadow swells and blurs at the extreme angles for real depth — scroll-scrubbed pure CSS, static wherever view() timelines aren't supported.
How it works
Scroll Flip is an animated 3d & depth text effect rendered entirely in CSS. It is driven by a scroll-linked animation timeline.
Controls
Scroll Flip exposes 4 dedicated controls — Hue, Max Angle, Axis and Perspective — 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
/* Scroll Flip — made with TEXT-FX · https://text-fx.app
* HTML: uses scroll-driven animation.
* Font: 'Unbounded', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Unbounded', sans-serif;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
display: inline-block;
transform-origin: center center;
transform: perspective(657px) rotateX(0deg);
color: hsl(203 68% 70%);
filter: brightness(1) drop-shadow(0 4px 6px hsl(203 72% 48% / 0.16));
}
@supports (animation-timeline: view()) {
.text-effect {
animation: text-effect-flip linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
will-change: transform, filter;
}
}
@keyframes text-effect-flip {
0% { transform: perspective(657px) rotateX(-63deg); filter: brightness(0.58) drop-shadow(0 24px 24px hsl(203 72% 48% / 0.4)); }
50% { transform: perspective(657px) rotateX(0deg); filter: brightness(1) drop-shadow(0 4px 6px hsl(203 72% 48% / 0.16)); }
100% { transform: perspective(657px) rotateX(63deg); filter: brightness(0.58) drop-shadow(0 24px 24px hsl(203 72% 48% / 0.4)); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Animated
- Browser support
- Scroll-scrubbed in Chromium & Safari; static elsewhere
- Capabilities
- pure, scroll