.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); } <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>
/* 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);
});
});
}); Live preview Edit any tab — preview updates live Ready