← Back to All Demos

Flip Box

3D flip card with 6 reveal styles — hover, click, or scroll-triggered. Pure CSS transforms, zero dependencies.

6
Flip Styles
3
Triggers
0
Dependencies
01

Variation 01

Horizontal Flip — Hover

Default horizontal 3D rotation on hover. Works on any device with hover support.

flip_direction=horizontal
trigger=hover
speed=0.6
perspective=1000

Hover to Flip

This card flips to reveal hidden content.

Revealed!

You found the hidden content!

Learn More

Vertical Flip

This card flips vertically on hover.

Revealed!

Vertical flip creates a different feel.

Learn More
02

Variation 02

Vertical Flip — Hover

Rotates on the X axis instead — a book-page flip. Same content, noticeably different feel.

flip_direction=vertical
trigger=hover
speed=0.6
perspective=1000
03

Variation 03

Click to Flip

Stays flipped until clicked again. Ideal for mobile-first layouts where hover is not reliable.

flip_direction=horizontal
trigger=click
speed=0.6

Click Me

Click this card to flip it over.

Clicked!

Click trigger gives users more control.

Learn More

Quick Flip

A faster flip with reduced perspective.

Snap!

Low perspective creates dramatic depth.

Learn More
04

Variation 04

Fast Flip, Low Perspective

Speed 200ms, perspective 600px. Snappy and flat — good for dense card grids.

trigger=hover
speed=0.2
perspective=600
05

Variation 05

Scroll Auto-Flip

Flips once when the card enters the viewport on scroll. No user interaction needed — great for storytelling layouts.

flip_direction=horizontal
trigger=scroll
speed=0.8

Scroll Down

This card flips when it enters the viewport.

Auto Flip!

Scroll trigger is great for reveal effects.

Learn More

All Variations

01
Horizontal Hover
flip_directionhorizontal
triggerhover
speed0.6
perspective1000
02
Vertical Hover
flip_directionvertical
triggerhover
speed0.6
perspective1000
03
Click Trigger
flip_directionhorizontal
triggerclick
speed0.6
04
Fast + Low Persp.
flip_directionhorizontal
triggerhover
speed0.2
perspective600
05
Scroll Trigger
flip_directionhorizontal
triggerscroll
speed0.8