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)

Detailed steps to install CentOS7 system on VMWare virtual machine

Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)

Blog

The complete version of the common Linux tool vi/vim

CSS to achieve the effect of rotating flip card animation

Detailed steps to install CentOS7 system on VMWare virtual machine

Solution to the Docker container cannot be stopped and deleted

Learn how to use the supervisor watchdog in 3 minutes

iFrame is a great way to use it as a popup layer to cover the background

Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)

The complete version of the common Linux tool vi/vim

vue-amap installation and usage steps

Solution to multiple 302 responses in nginx proxy (nginx Follow 302)

A brief discussion on the problem of forgotten mysql password and login error

3 simple ways to achieve carousel effects with JS

Recommend

MySQL 5.7.21 winx64 free installation version configuration method graphic tutorial

Implementation of importing and exporting docker images

Jenkins+tomcat automatic hot deployment/restart and solutions to problems encountered (recommended)

Upgrading Windows Server 2008R2 File Server to Windows Server 2016

Detailed explanation of the knowledge points of using TEXT/BLOB types in MySQL

React uses routing to redirect to the login interface

4 ways to optimize MySQL queries for millions of data

Solution to primary key conflict when innodb_index_stats reports an error when importing backup data

Basic ideas and codes for implementing video players in browsers

How to use MySQL's geometry type to handle longitude and latitude distance problems

Detailed explanation of how to connect Java to Mysql version 8.0.18

How to set up automatic daily database backup in Linux

Several ways to schedule backup of MySQL database (comprehensive)

Detailed explanation of the principles and usage of MySQL master-slave replication and read-write separation

Example of how to set div background transparent