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

How to convert MySQL horizontally to vertically and vertically to horizontally

Initialize Data DROP TABLE IF EXISTS `test_01`; C...

Vue + element to dynamically display background data to options

need: Implement dynamic display of option values ...

Alibaba Cloud applies for a free SSL certificate (https) from Cloud Shield

Because the project needs to use https service, I...

Summary of basic usage of CSS3 @media

//grammar: @media mediatype and | not | only (med...

Summary of Linux system user management commands

User and Group Management 1. Basic concepts of us...

A brief analysis of how to change the root password in Linux suse11 if you forget it

How to solve the problem of forgetting the root p...

Docker deploys Mysql, .Net6, Sqlserver and other containers

Table of contents Install Docker on CentOS 8 1. U...

Vue implements graphic verification code

This article example shares the specific code of ...

Docker executes a command in a container outside the container

Sometimes we want to execute a command in a conta...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

PNG Alpha Transparency in IE6 (Complete Collection)

Many people say that IE6 does not support PNG tra...

How to redirect to other pages in html page within two seconds

Copy code The code is as follows: <!DOCTYPE ht...

Detailed explanation and examples of database account password encryption

Detailed explanation and examples of database acc...

MySQL 8.0.20 installation and configuration method graphic tutorial

MySQL download and installation (version 8.0.20) ...

Difference between HTML ReadOnly and Enabled

The TextBox with the ReadOnly attribute will be di...