Cube Flip Cards
What it does
Four cards built as six-faced prisms with frosted glass sides: hovering flips the prism 180° on its horizontal axis to reveal the identical back face, after which pointer movement tilts it on both axes with short overwriting tweens, and a specular highlight sweeps across the face with the rotation. Leaving returns it to rest.
How it's built
| Category | cards |
|---|---|
| Tech | gsap |
| Complexity | widget |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Cube Flip Cards — Six-Faced Glass Prisms that Flip on Hover and Tilt with the Pointer
## Goal
Build a row of four cards, each rendered as a real **3D prism** with six faces: front and back are **frosted white glass** carrying a thumbnail, a title, a short description and an arrow; the four sides are translucent. On **hover** the prism **flips 180° on its horizontal axis** (you see the top and bottom faces sweep past) and lands on its identical back face; from then on **pointer movement tilts it** on both axes (up to ±40°) with short tweens, and a **specular highlight sweeps** across the face with the rotation. On leave it eases back to rest. GSAP core.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm). Font: **DM Sans** (400–500).
## Layout / HTML
```html
<div class="cf">
<section class="cf-stage">
<div class="cf-card"></div><div class="cf-card"></div><div class="cf-card"></div><div class="cf-card"></div>
</section>
</div>
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in