Cube Face Carousel
A 3D cube that rotates to show the face selected by the dot navigation, using radio inputs and no JavaScript.
- lines of CSS
- 51lines of CSS
- dependencies
- 0dependencies
- browser, for years
- Everybrowser, for years
- motion only on interaction
- Hovermotion only on interaction
Vue, Svelte, styled-components and Tailwind exports are part of Pro. HTML, CSS and React are free forever.
.fx-v12-sl-cube-15314 {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
width: 220px;
}
.fx-v12-sl-cube-15314 input { position: absolute; opacity: 0; pointer-events: none; }
.fx-v12-sl-cube-15314 .scene { width: 160px; height: 80px; perspective: 500px; }
.fx-v12-sl-cube-15314 .cube {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateZ(-80px) rotateY(0deg);
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.fx-v12-sl-cube-15314 .f {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 0.5rem;
backface-visibility: hidden;
}
.fx-v12-sl-cube-15314 .f1 { background: #8b5cf6; transform: rotateY(0deg) translateZ(80px); }
.fx-v12-sl-cube-15314 .f2 { background: #a855f7; transform: rotateY(90deg) translateZ(80px); }
.fx-v12-sl-cube-15314 .f3 { background: #7c3aed; transform: rotateY(180deg) translateZ(80px); }
.fx-v12-sl-cube-15314 .f4 { background: #6d28d9; transform: rotateY(270deg) translateZ(80px); }
.fx-v12-sl-cube-15314 #fx-v12-sl-cube-15314-2:checked ~ .scene .cube { transform: translateZ(-80px) rotateY(-90deg); }
.fx-v12-sl-cube-15314 #fx-v12-sl-cube-15314-3:checked ~ .scene .cube { transform: translateZ(-80px) rotateY(-180deg); }
.fx-v12-sl-cube-15314 #fx-v12-sl-cube-15314-4:checked ~ .scene .cube { transform: translateZ(-80px) rotateY(-270deg); }
.fx-v12-sl-cube-15314 .nav { display: flex; gap: 8px; }
.fx-v12-sl-cube-15314 .nav label {
width: 10px;
height: 10px;
border-radius: 50%;
background: #312e81;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.fx-v12-sl-cube-15314 .nav label:hover { transform: scale(1.3); }
.fx-v12-sl-cube-15314 #fx-v12-sl-cube-15314-1:checked ~ .nav label:nth-child(1),
.fx-v12-sl-cube-15314 #fx-v12-sl-cube-15314-2:checked ~ .nav label:nth-child(2),
.fx-v12-sl-cube-15314 #fx-v12-sl-cube-15314-3:checked ~ .nav label:nth-child(3),
.fx-v12-sl-cube-15314 #fx-v12-sl-cube-15314-4:checked ~ .nav label:nth-child(4) { background: #c4b5fd; }<div class="fx-v12-sl-cube-15314">
<input type="radio" name="fx-v12-sl-cube-15314" id="fx-v12-sl-cube-15314-1" checked />
<input type="radio" name="fx-v12-sl-cube-15314" id="fx-v12-sl-cube-15314-2" />
<input type="radio" name="fx-v12-sl-cube-15314" id="fx-v12-sl-cube-15314-3" />
<input type="radio" name="fx-v12-sl-cube-15314" id="fx-v12-sl-cube-15314-4" />
<div class="scene">
<div class="cube">
<div class="f f1">Design</div>
<div class="f f2">Build</div>
<div class="f f3">Test</div>
<div class="f f4">Ship</div>
</div>
</div>
<div class="nav">
<label for="fx-v12-sl-cube-15314-1"></label>
<label for="fx-v12-sl-cube-15314-2"></label>
<label for="fx-v12-sl-cube-15314-3"></label>
<label for="fx-v12-sl-cube-15314-4"></label>
</div>
</div>What do I do with this?
- Put
cube-face-carousel-15315.cssanywhere your page already loads CSS from — in Next.js that isapp/globals.css, or any stylesheet with a<link>in your HTML. - Then put the class on the element you want it on:
<button class="fx-v12-sl-cube-15314">. The CSS does nothing until a class name in it matches something on the page.
- Link the stylesheet, then paste the markup wherever you need it.
npx hoverlab add cube-face-carousel-15315What's included
- The markup and the stylesheet, in whichever framework you pick
- No runtime dependencies
Works with
- React
- Vue
- Svelte
- Tailwind
- styled-components
- Plain CSS
npx hoverlab add cube-face-carousel-15315
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Motion safety
Static estimate, read from the CSS
- Reduced motion
- Brief motion, no guard
Animates briefly or on interaction. Only looping motion gets a guard in this catalog; copy the one from the Insights tab if this ships on a critical path.
- What it animates
- Repaints
Animates
background. No reflow, but the browser repaints every frame, which is fine for one element and costly across many. - Flashing (WCAG 2.3.1)
- No flashing found
No repeating change in opacity, colour or brightness large enough to count as a flash.
- Layout shift (CLS)
- No shift expected
Nothing it animates moves or resizes the box in flow. A category from the CSS, not a measurement for this effect.
Every row is read from the shipped CSS. Only a figure marked measured came from a browser. Customizing the speed changes the timing, so recheck a customized copy. How it is computed
29 more effects in Sliders & Carousels
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Sliders & CarouselsShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
7 variations of Cube Face Carousel
Finished looks, each one a position in the customizer above. Copy any of them, or open it and keep moving the sliders.