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! |
<<: 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...
Detailed explanation of several clever applications of position:sticky sticky positioning
Background: position: sticky is also called stick...
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...