Tilted Polaroids
A pile of 35mm filmstrip negatives — sepia frames with sprocket holes and Kodachrome amber tones. Click to send the top frame to the bottom.
Tilted Polaroids the 3rd 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-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> .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;
} /* 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);
});
});
});