Fan Spread
Three tarot cards angled like a reading — aged parchment with midnight-blue backs and gold-foil arcana glyphs. Click to cycle.
Fan Spread the 2nd of 22 designs in the 22 CSS Stacked Card Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="scd-fan scd-cycle" tabindex="0">
<div class="scd-fan__c" data-i="0" style="--i: 0">
<span class="scd-fan__roman">XVII</span><span class="scd-fan__glyph">★</span
><span class="scd-fan__name">The Star</span>
</div>
<div class="scd-fan__c" data-i="1" style="--i: 1">
<span class="scd-fan__roman">I</span><span class="scd-fan__glyph">☽</span
><span class="scd-fan__name">The Magician</span>
</div>
<div class="scd-fan__c" data-i="2" style="--i: 2">
<span class="scd-fan__roman">XIX</span><span class="scd-fan__glyph">☉</span
><span class="scd-fan__name">The Sun</span>
</div>
</div> .scd-fan {
position: relative; width: 240px; height: 180px; margin: 0 auto;
cursor: pointer;
}
.scd-fan__c {
position: absolute; left: 50%; top: 50%;
width: 88px; height: 130px; margin: -65px 0 0 -44px;
background: #e8d4a2; color: #1a1d4a;
border: 1.5px solid #1a1d4a; border-radius: 8px;
display: flex; flex-direction: column;
align-items: center; justify-content: space-between;
padding: 8px 6px;
box-shadow: 0 8px 18px -8px rgba(26,29,74,0.5), inset 0 0 0 4px #e8d4a2, inset 0 0 0 5px #d4a017;
transition: transform .5s cubic-bezier(.3,1.2,.4,1), z-index 0s .25s;
z-index: calc(10 - var(--i));
}
.scd-fan__roman { font: 700 10px/1 ui-serif, Georgia; letter-spacing: 0.18em; }
.scd-fan__glyph { font-size: 36px; line-height: 1; color: #d4a017; }
.scd-fan__name { font: 700 9px/1 ui-serif, Georgia; letter-spacing: 0.04em; text-align: center; }
.scd-fan__c[data-i="0"] { transform: rotate(-14deg) translate(-52px, 6px); }
.scd-fan__c[data-i="1"] { transform: rotate(0deg) translateY(-10px); z-index: 12; }
.scd-fan__c[data-i="2"] { transform: rotate(14deg) translate(52px, 6px); } /* Click-to-cycle the fan: rotate cards through positions. */
document.querySelectorAll('.scd-fan.scd-cycle').forEach(function(stack) {
stack.addEventListener('click', function() {
var cards = Array.from(stack.children);
var max = cards.length - 1;
cards.forEach(function(card) {
var current = parseInt(card.dataset.i || '0', 10);
var next = current === 0 ? max : current - 1;
card.dataset.i = next;
card.style.setProperty('--i', next);
});
});
});