Tilt on Hover
A hardback book stack — oxblood leather covers with gilt-gold spine bands and cream page edges. Tilts subtly in 3D on hover.
Tilt on Hover the 19th of 22 designs in the 22 CSS Stacked Card Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. 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-pers"> <div class="scd-pers__c" style="--i: 0"><span class="scd-pers__title">VOL · I</span></div> <div class="scd-pers__c" style="--i: 1"><span class="scd-pers__title">VOL · II</span></div> <div class="scd-pers__c" style="--i: 2"><span class="scd-pers__title">VOL · III</span></div> </div>
.scd-pers {
position: relative; width: 200px; height: 150px; margin: 0 auto;
perspective: 1000px; transform-style: preserve-3d;
transition: transform .4s cubic-bezier(.3,1,.3,1);
}
.scd-pers__c {
position: absolute; inset: 0;
background:
linear-gradient(90deg, transparent 0%, transparent 78%, #f5e8c4 78%, #f5e8c4 100%),
linear-gradient(135deg, #5a1a1a 0%, #3a0a0a 100%);
color: #c9a233;
border-radius: 2px 6px 6px 2px;
display: flex; align-items: center; padding: 0 18px;
font: 700 14px ui-serif, Georgia;
box-shadow: 0 8px 22px -8px rgba(90,26,26,0.55), inset 0 0 0 1px rgba(201,162,51,0.2);
transform: translateZ(calc(var(--i) * -30px)) translateY(calc(var(--i) * -8px));
transition: transform .5s cubic-bezier(.3,1,.3,1);
z-index: calc(10 - var(--i));
}
.scd-pers__title {
border-top: 1px solid #c9a233;
border-bottom: 1px solid #c9a233;
padding: 6px 0;
letter-spacing: 0.16em;
}
.scd-pers:hover { transform: rotateX(-12deg) rotateY(8deg); }