<div class="wrapper">

  <h2>CSS Book Effect with 3D Animation</h2>

  <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 class="grid-item">
        <!-- Book -->
        <div class="sf-book-cover">
            <a class="book-wrapper" href="#">
                <div class="cover">
                    <i class="fa-solid fa-code"></i>
                    <span class="number">02</span>
                    <p>Chapter 2</p>
                    <h4>Setup</h4>
                </div>
                <div class="page page-1"></div>
                <div class="page page-2"></div>
                <div class="page page-3"></div>
            </a>
        </div>
        <p>Step-by-step instructions to set up and begin using the system.</p>
    </div>

    <div class="grid-item">
        <!-- Book -->
        <div class="sf-book-cover">
            <a class="book-wrapper" href="#">
                <div class="cover">
                    <i class="fa-regular fa-heart"></i>
                    <span class="number">03</span>
                    <p>Chapter 3</p>
                    <h4>Features</h4>
                </div>
                <div class="page page-1"></div>
                <div class="page page-2"></div>
                <div class="page page-3"></div>
            </a>
        </div>
        <p>A detailed description of the main features and capabilities.</p>
    </div>

    <div class="grid-item">
        <!-- Book -->
        <div class="sf-book-cover">
            <a class="book-wrapper" href="#">
                <div class="cover">
                    <i class="fa-solid fa-list-check"></i>
                    <span class="number">04</span>
                    <p>Chapter 4</p>
                    <h4>Settings</h4>
                </div>
                <div class="page page-1"></div>
                <div class="page page-2"></div>
                <div class="page page-3"></div>
            </a>
        </div>
        <p>Guidance on how to customize and configure the system to meet specific needs.</p>
    </div>

    <div class="grid-item">
        <!-- Book -->
        <div class="sf-book-cover">
            <a class="book-wrapper" href="#">
                <div class="cover">
                    <i class="fa-solid fa-headset"></i>
                    <span class="number">05</span>
                    <p>Chapter 5</p>
                    <h4>Support</h4>
                </div>
                <div class="page page-1"></div>
                <div class="page page-2"></div>
                <div class="page page-3"></div>
            </a>
        </div>
        <p>Common issues, solutions, and frequently asked questions to assist users.</p>
    </div>

    <div class="grid-item">
        <!-- Book -->
        <div class="sf-book-cover">
            <a class="book-wrapper" href="#">
                <div class="cover">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <span class="number">06</span>
                    <p>Chapter 6</p>
                    <h4>Resources</h4>
                </div>
                <div class="page page-1"></div>
                <div class="page page-2"></div>
                <div class="page page-3"></div>
            </a>
        </div>
        <p>Additional resources, references, and supplementary information for further exploration.</p>
    </div>

</div>
    
<p style="text-align: center; margin-top: 60px;">See full article: <a target="_blank" href="https://snippflow.com/snippet/css-book-effect-with-3d-animation/">CSS Book Effect</a>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #f1f4f7; color: #3b495e; font-family: Inter; font-size: 15px; line-height: 1.2; padding: 30px 20px; }

.wrapper { width: 100%; max-width: 900px; margin: 0 auto; }
.wrapper > h2 { text-align: center; margin-bottom: 40px; }

/* Grid */ 
.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); }