CSS Book Effect with 3D Animation

The CSS Book Effect is a visual effect made with CSS that simulates the turning of book pages. By using advanced CSS properties like 3D transformations and animations you can create the illusion of page flipping and give your interface a cool look.

How does it work?

The core of the effect is using the transform: rotateY() property to simulate the page rotating in 3D space. Combined with the perspective property which adds depth to the elements it creates the flipping effect. Adding smooth animations and shadowing makes it look even more natural.

Use cases

The 3D book effect with animation can be used in:

• Interactive eBooks – interfaces that look like physical books.
• Content presentations – information in visually appealing book-like sections.
• Portfolios – projects with a page-turning animation.

HTML Structure

<div class="grid">

    <div class="grid-item">
        <!-- Book -->
        <div class="sf-book-cover">
            <a class="book-wrapper" href="#">
                <div class="cover">
                    <i class="fa-regular fa-folder"></i>
                    <span class="number">01</span>
                    <p>Chapter 1</p>
                    <h4>Introduction</h4>
                </div>
                <div class="page page-1"></div>
                <div class="page page-2"></div>
                <div class="page page-3"></div>
            </a>
        </div>
        <p>An overview of the purpose, scope, and audience for this documentation.</p>
    </div>

    ...

</div>

CSS

/* Sample grid for books */ 
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
.grid .grid-item { text-align: center; }
@media only screen and (max-width: 959px){
    .grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px){
    .grid { grid-template-columns: repeat(1, 1fr); }
}

/* -------------------------------------------- */
/*  Snippflow CSS Book Effect with 3D Animation */
/* -------------------------------------------- */

.sf-book-cover {
    --sf-book-cover-bg: #212121;
    --sf-book-cover-title: #fff;
    --sf-book-cover-icon: #63D9B3;
    --sf-book-cover-page-1: #efefef;
    --sf-book-cover-page-2: #f5f5f5;
    --sf-book-cover-page-3: #fafafa;
}

.sf-book-cover { width: 200px; margin: 0 auto 30px; }
.sf-book-cover a.book-wrapper { display: block; position: relative; width: 200px; height: 280px; perspective: 900px; transition: all .2s ease-in-out; }
.sf-book-cover a.book-wrapper > div { display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0 5px 5px 0; box-shadow: 1px 0px 4px -1px rgba(0, 0, 0, 0.08); transform-style: preserve-3d; transition: all .4s ease-in-out; will-change: transform; transform-origin: 0% 50% 0px; }
.sf-book-cover a.book-wrapper .cover { justify-content: flex-end; align-items: flex-start; flex-direction: column; padding: 30px; z-index: 2; background-color: var(--sf-book-cover-bg); background-image: url(book-cover.png); background-repeat: no-repeat; background-size: cover; color: var(--sf-book-cover-title); overflow: hidden; }
.sf-book-cover a.book-wrapper .cover i { display: flex; justify-content: center; align-items: center; position: absolute; left: 30px; top: 30px; width: 60px; height: 60px; border-radius: 10px; font-size: 26px; color: var(--sf-book-cover-icon); border: 2px double var(--sf-book-cover-icon); }
.sf-book-cover a.book-wrapper .cover .number { position: absolute; right: -15px; bottom: 0px; z-index: -1; font-size: 120px; color: #2c2c2c; }
.sf-book-cover a.book-wrapper .cover p { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.sf-book-cover a.book-wrapper .cover h4 {  font-size: 22px; font-weight: 500; }
.sf-book-cover a.book-wrapper .page-1 { background-color: var(--sf-book-cover-page-1); }
.sf-book-cover a.book-wrapper .page-2 { background-color: var(--sf-book-cover-page-2); }
.sf-book-cover a.book-wrapper .page-3 { background-color: var(--sf-book-cover-page-3); }

.sf-book-cover a.book-wrapper:hover { transform: rotate(3deg); }
.sf-book-cover a.book-wrapper:hover .page-1 { transform: rotateY(0); }
.sf-book-cover a.book-wrapper:hover .page-2 { transform: rotateY(-24deg); }
.sf-book-cover a.book-wrapper:hover .page-3 { transform: rotateY(-31deg); }
.sf-book-cover a.book-wrapper:hover .cover { transform: rotateY(-37deg); }

Result

See the Pen CSS Book Effect with 3D Animation by Snippflow (@snippflow) on CodePen.