3D Book Cover
A 3D book cover with a spine that straightens to face you on hover — great for product/ebook pages.
<div class="book"><div class="book-cover"><span>The<br>Design<br>Guide</span></div></div>body{background:#1a1426}
.book{perspective:900px}
.book-cover{position:relative;width:150px;height:210px;border-radius:4px 8px 8px 4px;background:linear-gradient(135deg,#ff7a18,#ff477e);transform:rotateY(-28deg);transform-style:preserve-3d;transition:transform .5s;box-shadow:14px 14px 30px rgba(0,0,0,.4);display:grid;place-items:center}
.book:hover .book-cover{transform:rotateY(0)}
.book-cover::before{content:'';position:absolute;left:0;top:0;width:14px;height:100%;background:#c2185b;transform:translateX(-14px) rotateY(90deg);transform-origin:right}
.book-cover span{color:#fff;font:800 22px/1.3 system-ui,sans-serif;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.3)}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.