Weekend in Lisbon
Three days of tiles, tarts and trams.
3D Book Hover Effect
A hardcover book with a real spine and page block. At rest it shows the cover and the page edges; on hover it turns the other way to show the spine. Four faces on a preserve-3d box.
Also known as: 3d book cover css, book mockup hover, rotating book spine.
A field guide to
Motion
M. Rivera
Motion
HTML
<div class="hfx-book-3d">
<div class="hfx-book-3d-book">
<div class="hfx-book-3d-cover">
<small>A field guide to</small>
<strong>Motion</strong>
<span>M. Rivera</span>
</div>
<div class="hfx-book-3d-spine"><span>Motion</span></div>
<div class="hfx-book-3d-pages"></div>
<div class="hfx-book-3d-back"></div>
</div>
</div>CSS
.hfx-book-3d {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
perspective: 40em;
font-family: Georgia, "Times New Roman", serif;
}
.hfx-book-3d::before {
content: "";
position: absolute;
left: -0.5em;
right: -0.5em;
bottom: -0.7em;
height: 1.2em;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, #000 22%, transparent), transparent);
}
.hfx-book-3d-book {
position: relative;
width: 6.4em;
height: 9em;
transform-style: preserve-3d;
transform: rotateY(-30deg);
transition: transform 0.7s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-book-3d:hover .hfx-book-3d-book {
transform: rotateY(34deg);
}
.hfx-book-3d-cover,
.hfx-book-3d-back {
position: absolute;
inset: 0;
border-radius: 0.15em 0.4em 0.4em 0.15em;
}
.hfx-book-3d-cover {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.25em;
padding: 0 0.7em 0 1.1em;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000) 0 0.3em, color-mix(in srgb, var(--c) 70%, #fff) 0.3em 0.38em, var(--c) 0.38em);
color: #fff;
transform: translateZ(0.7em);
}
.hfx-book-3d-cover small {
font-size: 0.62em;
white-space: nowrap;
font-style: italic;
opacity: 0.85;
}
.hfx-book-3d-cover strong {
font-size: 1.3em;
line-height: 1;
}
.hfx-book-3d-cover span {
margin-top: 1.6em;
font: 600 0.6em system-ui, sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0.85;
}
.hfx-book-3d-back {
background: color-mix(in srgb, var(--c) 65%, #000);
transform: translateZ(-0.7em) rotateY(180deg);
}
.hfx-book-3d-spine,
.hfx-book-3d-pages {
position: absolute;
top: 0;
width: 1.4em;
height: 100%;
}
.hfx-book-3d-spine {
left: 0;
display: grid;
place-items: center;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #000), color-mix(in srgb, var(--c) 85%, #000) 50%, color-mix(in srgb, var(--c) 60%, #000));
color: #fff;
transform: translateX(-0.7em) rotateY(-90deg);
}
.hfx-book-3d-spine span {
writing-mode: vertical-rl;
font: 700 0.62em system-ui, sans-serif;
letter-spacing: 0.25em;
text-transform: uppercase;
}
.hfx-book-3d-pages {
top: 2%;
right: 0;
height: 96%;
background: repeating-linear-gradient(90deg, #fbf8f1 0 0.1em, #e2dccd 0.1em 0.13em);
transform: translateX(0.7em) rotateY(90deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-book-3d, .hfx-book-3d *, .hfx-book-3d::before, .hfx-book-3d::after, .hfx-book-3d *::before, .hfx-book-3d *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.