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

Native js drag and drop function to create a slider example code

Drag and drop is a common function in the front e...

Summary of knowledge points on using calculated properties in Vue

Computed properties Sometimes we put too much log...

How to debug loader plugin in webpack project

Recently, when I was learning how to use webpack,...

Detailed explanation of Vue configuration request multiple server solutions

1. Solution 1.1 Describing the interface context-...

MySQL 5.7.17 installation and configuration graphic tutorial

The blogger said : I have been writing a series o...

Beginners learn some HTML tags (3)

Beginners who are exposed to HTML learn some HTML...

jQuery plugin to implement search history

A jQuery plugin every day - to make search histor...

Issues installing Python3 and Pip in ubuntu in Docker

text 1) Download the Ubuntu image docker pull ubu...

How to use skeleton screen in vue project

Nowadays, application development is basically se...

CSS3 realizes draggable Rubik's Cube 3D effect

Mainly used knowledge points: •css3 3d transforma...

How to change the terminal to a beautiful command line prompt in Ubuntu 18

I reinstalled VMware and Ubuntu, but the command ...

A detailed guide to custom directives in Vue

Table of contents 1. What is a custom instruction...

How to install PHP7 Redis extension on CentOS7

Introduction In the previous article, we installe...

Using Apache ab to perform http performance testing

Mac comes with Apache environment Open Terminal a...