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

Home

Web Front-end

CSS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 24, 2023 am 09:30 AM

css animationPage turning effectsStep by step tutorial

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

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 id="第一页">第一页</h1>
        </div>
        <div class="page page2">
            <h1 id="第二页">第二页</h1>
        </div>
        <div class="page page3">
            <h1 id="第三页">第三页</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!

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

Where should 'Subscribe to Podcast' link to?Apr 16, 2025 pm 12:04 PM

For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:

Browser Engine DiversityApr 16, 2025 pm 12:02 PM

We lost Opera when they went Chrome in 2013. Same deal with Edge when it also went Chrome earlier this year. Mike Taylor called these changes a "Decreasingly

UX Considerations for Web SharingApr 16, 2025 am 11:59 AM

From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these

Weekly Platform News: Apple Deploys Web Components, Progressive HTML Rendering, Self-Hosting Critical ResourcesApr 16, 2025 am 11:55 AM

In this week's roundup, Apple gets into web components, how Instagram is insta-loading scripts, and some food for thought for self-hosting critical resources.

Git Pathspecs and How to Use ThemApr 16, 2025 am 11:53 AM

When I was looking through the documentation of git commands, I noticed that many of them had an option for . I initially thought that this was just a

A Color Picker for Product ImagesApr 16, 2025 am 11:49 AM

Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the with . Nor do we

A Dark Mode Toggle with React and ThemeProviderApr 16, 2025 am 11:46 AM

I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including

Some Hands-On with the HTML Dialog ElementApr 16, 2025 am 11:33 AM

This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and

See all articles