Home > Article > Web Front-end > CSS Animation Tutorial: Teach you step-by-step to achieve page turning effects

CSS Animation Tutorial: Teach you step-by-step to achieve page turning effects

WBOYOriginal: 2023-10-24 09:30:261198browse

CSS Animation Tutorial: Teach you step-by-step to implement page turning effects, specific code examples are required

CSS animation is an essential part of modern website design. It can add vividness to web pages, attract users' attention, and improve user experience. One of the common CSS animation effects is the page turning effect. In this tutorial, I'll take you step by step to achieve this eye-catching effect and provide specific code examples.

First, we need to create a basic HTML structure. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS翻页特效</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="page page1">
            <h1>第一页</h1>
        </div>
        <div class="page page2">
            <h1>第二页</h1>
        </div>
        <div class="page page3">
            <h1>第三页</h1>
        </div>
    </div>
</body>
</html>

In the above code, we create a container with three pages. Each page has a title that displays different content.

Next, we need to write CSS styles. Open a new CSS file and add the following code:

.container {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    position: relative;
    overflow: hidden;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: 1s;
}

.page1 {
    background-color: #f8b195;
    transform: rotateY(0deg);
}

.page2 {
    background-color: #f67280;
    transform: rotateY(-180deg);
}

.page3 {
    background-color: #c06c84;
    transform: rotateY(-180deg);
}

In the above code, we set the width and height of the container to 100% to easily adapt to different screen sizes. Then we use the CSS perspective property to create a 3D perspective effect, making the page flip effect more realistic. Set position to relative and overflow to hidden to ensure that page content does not overflow the container.

Next, we set the width, height and positioning of each page, and use the transform-style attribute to maintain the 3D transformation effect, and then use the transition attribute to achieve a smooth transition effect.

In terms of the background color of the page, we set a different color for each page to facilitate distinction.

Now that we have completed the basic HTML structure and CSS style, let’s realize the page turning effect.

Open your CSS file and add the following code:

.container:hover .page1 {
    transform: rotateY(180deg);
}

.container:hover .page2 {
    transform: rotateY(0deg);
}

.container:hover .page3 {
    transform: rotateY(180deg);
}

In the above code, we trigger the flip effect by using the :hover pseudo-class. When the user hovers the mouse pointer over the container, page 1 will flip 180 degrees, page 2 remains the same, and page 3 flips 180 degrees.

Save your code and refresh the browser. You should now see the three parts of the page flipped.

Through the above tutorial, we successfully implemented a striking CSS page turning effect and provided specific code examples in a step-by-step manner. You can adjust and expand it to suit your needs, adding more pages or more complex effects.

CSS animation is a very important and interesting part of web design, it can add vitality and creativity to your website. I hope this tutorial can be helpful to you and inspire more creativity and inspiration.

The above is the detailed content of CSS Animation Tutorial: Teach you step-by-step to achieve page turning effects. For more information, please follow other related articles on the PHP Chinese website!

css html 指针 position overflow 伪类 transform transition

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS Layout Tutorial: The Best Way to Implement a Circular Navigation Bar LayoutNext article：CSS Layout Tutorial: The Best Way to Implement a Circular Navigation Bar Layout

See more

CSS Animation Tutorial: Teach you step-by-step to achieve page turning effects

Related articles