Sample code for realizing book page turning effect using css3

Sample code for realizing book page turning effect using css3

Key Takeaways:
1. Mastering CSS3 3D animation
2. How to solve the change of page content after flipping
3. How to keep the book centered

Code Overview

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .book{
        margin: auto;
        margin-top: 2rem;
        transform: translate(0,0);
        perspective: 5000px;
        max-width: 40%;
        height: 800px;
        position: relative;
        transition:all 1s ease;
    }
    .page{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background-color: pink;
        cursor: pointer;
        transition:all 1s ease;
        transform-origin: left center;
        transform-style: preserve-3d;
    }
    .active{
        z-index: 1;
    }
    .page.flipped{
        transform:rotateY(-180deg)
    }
    .back,.front{
        text-align: center;
        position: absolute;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }
    .back{
        transform:rotateY(180deg)
    }
</style>
<body>
    <div class="book">
        <div class="page active">
            <div class="front">Cover</div>
            <div class="back">1</div>
        </div>
        <div class="page">
            <div class="front">2</div>
            <div class="back">3</div>
        </div>
        <div class="page">
            <div class="front">4</div>
            <div class="back">5</div>
        </div>
        <div class="page">
            <div class="front">6</div>
            <div class="back">Tail</div>
        </div>
    </div>
</body>
<script>
    let pages = document.getElementsByClassName('page')
    let book = document.getElementsByClassName('book')[0]
    function bookMove(drect){
        if(drect==='right'){
            book.style.transform = 'translate(50%,0)'
        }else if(drect==='left'){
            book.style.transform = 'translate(0,0)'
        }else{
            book.style.transform = 'translate(100%,0)'
        }
    }
    for(let i = 0;i<pages.length;i++){
        pages[i].addEventListener('click',()=>{
            if (pages[i].classList.contains('flipped')) {
                pages[i].classList.remove('flipped')
                pages[i].classList.add('active')
                if(i===0){
                    bookMove('left')
                }
                if (pages[i].nextElementSibling!==null){
                    pages[i].nextElementSibling.classList.remove('active')
                }else{
                    bookMove('right')
                }
            }else{
                pages[i].classList.add('flipped')
                pages[i].classList.remove('active')
                if(i===0){
                    bookMove('right')
                }
                if (pages[i].nextElementSibling!==null){
                    pages[i].nextElementSibling.classList.add('active')
                }else{
                    bookMove('close')
                }
            }
        })
    }
</script>
</html>

Key points analysis
CSS3 animation property explanation:
perspective: 5000px; This is the perspective attribute, which can be simply considered as the attribute that realizes the "near big and far small" effect. It should be noted here that perspective needs to be set on the parent element of the element that undergoes 3D transformation, because the element that undergoes 3D transformation can only see the effect of perspective transformation with the parent element as the background.
transition:all 1s ease; here are the transition properties, you can set the transition time and the easing function applied
transform-origin: left center; This property can set the starting point of the transformation property, which means rotating around the y-axis with the left center as the point
transform-style: preserve-3d; This property allows the child elements of the element with this property to present the same perspective based on the parent element, provided that the child elements also undergo 3d transformation.

Solve the display problem of page content:
backface-visibility: hidden; Hides the element that has been rotated 180 degrees, that is, the back side is invisible. Using this property, page 1 can be rotated 180 degrees and then hidden, while page 2, which is rotated from -180 degrees to 0 degrees, is displayed, thereby switching the content of the book.

To solve the problem of centering pages in a book:
transform: translate(0,0) Through the translation attribute, the remaining thing to solve this problem is to add click events with js and control the element style to realize the page turning animation

This is the end of this article about the sample code for implementing the book page turning effect with CSS3. For more relevant CSS3 book page turning content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Comprehensive inventory of important log files in MySQL

>>:  11 Reasons Why Bootstrap Is So Popular

Recommend

Unity connects to MySQL and reads table data implementation code

The table is as follows: Code when Unity reads an...

JavaScript implements circular carousel

This article shares the specific code of JavaScri...

CSS3 realizes text relief effect, engraving effect, flame text

To achieve this effect, you must first know a pro...

How to call a piece of HTML code together on multiple HTML pages

Method 1: Use script method: Create a common head...

Nginx solves cross-domain issues and embeds third-party pages

Table of contents Preface difficulty Cross-domain...

Alignment issue between input text box and img verification code (img is always one head higher than input)

In web page production, input and img are often pl...

Solution to the error when importing MySQL big data in Navicat

The data that Navicat has exported cannot be impo...

How to build a React project with Vite

Table of contents Preface Create a Vite project R...

SQL Server Comment Shortcut Key Operation

Batch comments in SQL Server Batch Annotation Ctr...

MySQL cursor functions and usage

Table of contents definition The role of the curs...

Comprehensive summary of mysql functions

Table of contents 1. Commonly used string functio...

Implementing a random roll caller based on JavaScript

This article shares the specific code of JavaScri...

td width problem when td cells are merged

In the following example, when the width of the td...

Summary of some related operations of Linux scheduled tasks

I have searched various major websites and tested...

How to view and terminate running background programs in Linux

Linux task management - background running and te...