Fold Effect Card
A 200 × 160 px card cut into two halves that pivot 30° around the center line in 0.5 s: their outer edges move toward you and the card hollows into a V, like a sheet being creased. Hover, Tab or a tap fold it, with no JavaScript; under reduced motion, a shadow along the crease replaces the motion.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. 3D has 50 effects, including 8 free. Explore the category →
3 usage examples
How it works
The root .fx-0013-root (#0a0a0f background, at least 300 px tall) centers the card .fold-card: 200 × 160 px, position: relative, perspective: 1000px and tabindex="0". Its two 80 px halves use position: absolute: .fold-top at the top (#6366f1 → #8b5cf6 gradient), .fold-bottom at the bottom (#8b5cf6 → #d946ef). The first turns on its bottom edge (transform-origin: center bottom), the second on its top edge (center top): both hinges meet on the center line.
When the card is hovered, or has focus (:focus-within), the top half gets rotateX(-30deg) and the bottom half rotateX(30deg), over 0.5 s. Both outer edges move 40 px toward you (80 px × sin 30°) while the crease stays in place: the card hollows into a V. Measured in Chromium 151 and Firefox 153: each half goes from 80 to 72 px tall on screen and its outer edge widens from 200 to 208 px, as perspective enlarges what comes closer. The motion is over in about 0.4 s.
Why the card carries its own height and position: relative: the halves use position: absolute, so they place themselves relative to the nearest positioned ancestor. The card must play that role, with a height equal to both halves: "top" stays on top, "bottom" at the bottom, and the area receiving the hover covers the whole card (200 × 160 px). The hover sits on the card rather than on the halves, so the pointer does not leave the area when the halves change shape.
Accessibility
- Keyboard and touch: the card has
tabindex="0"and every:hoverrule is doubled by:focus-within. Tab folds it, the next Tab unfolds it; a 2 px#a5b4fcring (:focus-visible) marks keyboard focus. On a touchscreen, a tap folds it, a tap elsewhere unfolds it. Measured in Chromium 151, Firefox 153 and WebKit 26. A mouse click also gives focus: the card stays folded until the next click elsewhere. - Reduced motion: under
prefers-reduced-motion: reduce, a block scoped to.fx-0013-rootremoves the rotation of both halves (computed transform:none); an inner shadow fades in over 0.3 s on each side of the center line and marks the crease without motion. - Content: the fold hides nothing. Both halves stay readable, in HTML order (top then bottom), for screen readers as on screen; at 30°, the text is barely shortened (72 px tall instead of 80).
- Contrast: 16 px semibold white text. Top half: 4.47:1 to 4.23:1; bottom half: 4.23:1 to 3.46:1, below the 4.5:1 threshold toward the magenta. Darken the end of the bottom gradient (for instance
#c026d3, 4.71:1) if the card carries information.
Browser compatibility
CSS only (perspective, rotateX, transform-origin, backface-visibility, :focus-within, :focus-visible), no JavaScript, no dependencies. Measured in Chromium 151 and Firefox 153: same fold, same on-screen sizes, two independent copies on one page, shadow without motion under reduced motion. Playwright's WebKit (26.5) flattens all CSS 3D, even a reference cube: focus and touch are measured there, the 3D rendering was not checked on a real Safari.
Without 3D transforms, the card stays flat: both halves remain readable one above the other, nothing is lost. Without :focus-visible, the browser's default focus outline shows instead.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0013-root">
<div class="demo-3d">
<div class="fold-card" tabindex="0">
<div class="fold-top">… moitié haute …</div>
<div class="fold-bottom">… moitié basse …</div>
</div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Fold angle (CSS — rotateX(-30deg) and rotateX(30deg) in the hover rules) |
30° | Keep two opposite values. 15° gives a barely visible crease, 60° a card almost closed toward you (the halves drop to about 40 px tall on screen). Beyond 90°, the hidden back faces make the halves disappear. |
| Fold direction (CSS — signs of both angles) | top −30°, bottom +30°: edges toward you | Swap the signs (top 30deg, bottom -30deg): the edges move away and the center line seems to come forward, like a greeting card standing open. |
Perspective (CSS — perspective of .fold-card) |
1000px | Smaller, the V reads better: 500 px on a 150 px tall card, 420 px on a 120 px place card. Larger, the fold becomes almost invisible from the front. |
Size (CSS — width and height of .fold-card, height of both halves) |
200 × 160 px, 80 px halves | The card's height must stay twice the height of one half: change both together, or an empty band appears in the middle or the halves overlap. |
Duration (CSS — transition of both halves) |
.5s (ease curve) | .3s gives a crisp fold, .8s a heavy paper. Keep the same duration on both halves for a symmetric V. |
Colors and focus ring (CSS — gradients of .fold-top and .fold-bottom, :focus-visible) |
#6366f1 → #8b5cf6, #8b5cf6 → #d946ef, ring #a5b4fc | A gradient that continues from one half to the other reads as a single sheet. Two distinct colors read as two panels instead. On a white page, pick a dark ring. |
FAQ
left: 0 and right: 0, 50% wide each, full height), give transform-origin: right center to the left half and left center to the right one, and replace the rotations with rotateY(30deg) on the left and rotateY(-30deg) on the right. The outer edges will move forward the same way, like a half-open book.position: absolute: they give the card no height. So the card carries 160 px and position: relative itself, so the halves sit inside its frame and the hover area covers everything. If one half's text gets longer, raise the height of the halves and the card together.
