Animation Engine
3D Flip Card
Turn any element into a two-sided 3D flip card — the element is the front, and a configurable back (heading, text, colour or image) rotates in on hover, click, scroll or a timed auto-flip. Seven flip styles, horizontal or vertical.
7 flip styles
Two sides, one card.
Hover any card below — the front rotates away to reveal a configured back face. The front is just your element; the back (heading, text, colour or image) is set in the Animations tab. Seven styles, horizontal or vertical.
Hover to flip
Each card uses a different flip style
Flip
Hover me
Cube
Hover me
Fold
Hover me
Door
Hover me
Diagonal
Hover me
Pop
Hover me
Every flip style
Horizontal or vertical, on hover / click / scroll / auto
Flip
Cube
Fold
Door
Diagonal
Pop
Carousel
How to set it up
Add it in under a minute
- Open an element → Animations → 3D Flip Card.
- Pick a flip style + axis, and a trigger (hover, click, scroll or auto).
- Fill in the back face — heading, text, colour or background image.
- Save and flip it.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.