.scd-tilt {
position: relative; width: 240px; height: 190px; margin: 0 auto;
display: flex; justify-content: center; align-items: center;
cursor: pointer;
}
.scd-tilt__c {
position: absolute;
width: 116px; padding: 10px 8px 22px;
background: #2a1d0e;
border-radius: 2px;
box-shadow: 0 8px 18px -6px rgba(0,0,0,0.55);
display: flex; flex-direction: column; gap: 6px;
transform: translate(calc((var(--i) - 1) * 18px), calc(var(--i) * 6px)) rotate(calc((var(--i) - 1) * 9deg));
z-index: calc(10 - var(--i));
transition: transform .5s cubic-bezier(.3,1.2,.4,1), z-index 0s .25s;
background-image:
radial-gradient(circle 3px at 8px 8px, #fff8e7 99%, transparent 100%),
radial-gradient(circle 3px at 28px 8px, #fff8e7 99%, transparent 100%),
radial-gradient(circle 3px at 48px 8px, #fff8e7 99%, transparent 100%),
radial-gradient(circle 3px at 68px 8px, #fff8e7 99%, transparent 100%),
radial-gradient(circle 3px at 88px 8px, #fff8e7 99%, transparent 100%),
radial-gradient(circle 3px at 108px 8px, #fff8e7 99%, transparent 100%);
background-repeat: no-repeat;
}
.scd-tilt__strip {
width: 100%; height: 86px; border-radius: 1px; margin-top: 8px;
background: var(--ph);
filter: sepia(0.4) saturate(1.2);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.scd-tilt__c span {
font: 700 9px ui-monospace, monospace;
color: #fcb938; text-align: center; letter-spacing: 0.16em;
} <div class="scd-tilt scd-cycle" tabindex="0">
<div class="scd-tilt__c" style="--i:0">
<div class="scd-tilt__strip" style="--ph:linear-gradient(135deg,#fcb938,#704830)"></div>
<span>22A · F1.4</span>
</div>
<div class="scd-tilt__c" style="--i:1">
<div class="scd-tilt__strip" style="--ph:linear-gradient(135deg,#704830,#3a2410)"></div>
<span>23A · F2.8</span>
</div>
<div class="scd-tilt__c" style="--i:2">
<div class="scd-tilt__strip" style="--ph:linear-gradient(135deg,#fff8e7,#fcb938)"></div>
<span>24A · F5.6</span>
</div>
</div> /* Click-to-cycle the filmstrip pile: front frame goes to the back. */
document.querySelectorAll('.scd-tilt.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.style.getPropertyValue('--i') || '0', 10);
var next = current === 0 ? max : current - 1;
card.style.setProperty('--i', next);
});
});
});