CSS to achieve the effect of rotating flip card animation

CSS to achieve the effect of rotating flip card animation

The css animation of the rotating flip effect, the specific content is as follows:

1. We first set the size, color, etc. of the two boxes, then position them to overlap, and finally set the animation

Here are some examples:

<style>
        .box {
            height: 300px;
            width: 300px;
            position: relative;
        }
        
        .zh,
        .fan {
            height: 300px;
            width: 300px;
            line-height: 300px;
            font-size: 30px;
            text-align: center;
            color: blue;
            transition: all 2s;
            backface-visibility: hidden;
            /* Back side is not visible */
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .zh {
            background-color: aqua;
        }
        
        .fan {
            background-color: aquamarine;
            transform: rotateY(-180deg) rotateZ(-180deg);
        }
        
        .box:hover .zh {
            transform: rotateY(180deg) rotateZ(180deg)
        }
        
        .box:hover .fan {
            transform: rotateY(0) rotateZ(0);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="zh">Front</div>
        <div class="fan">Back</div>

    </div>
</body>

2. The effects are as follows:

Summarize

The above is the CSS implementation of the rotating flip animation effect introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  HTML tag full name and function introduction

>>:  Six-step example code for JDBC connection (connecting to MySQL)

Recommend

Detailed explanation of HTML page header code example

Knowledge point 1: Set the base URL of the web pa...

XHTML Basic 1.1, a mobile web markup language recommended by W3C

W3C recently released two standards, namely "...

Diagram of the process of implementing direction proxy through nginx

This article mainly introduces the process of imp...

Summary of three methods of lazy loading lazyLoad using native JS

Table of contents Preface Method 1: High contrast...

Website Color Schemes Choosing the Right Colors for Your Website

Does color influence website visitors? A few year...

Detailed usage of Vue timer

This article example shares the specific code of ...

How to use CSS attribute selectors to splice HTML DNA

CSS attribute selectors are amazing. They can hel...

Detailed steps to delete environment variables in Linux

How to delete environment variables in Linux? Use...

MySQL gets the current date and time function

Get the current date + time (date + time) functio...

Detailed examples of variable and function promotion in JavaScript

js execution Lexical analysis phase: includes thr...

Practical method of deleting a row in a MySql table

First, you need to determine which fields or fiel...

Pure CSS to achieve cool neon light effect (with demo)

I have recently been following the CSS Animation ...

Ubuntu basic settings: installation and use of openssh-server

Record the installation and use of openssh-server...