How to achieve card flip effect in css3-Front-end Q&A-php.cn

How to achieve card flip effect in css3

WBOY

Release： 2022-03-22 16:44:03

Original

2741 people have browsed it

Method: 1. Use the animation attribute to bind the flip animation to the card element; 2. Use the "@keyframes" rule and transform attribute to set the element flip animation action. The syntax is "@keyframes name {100%{transform: rotateY(flip angle);}}".

How to achieve card flip effect in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to achieve card flip effect in css3

The transform attribute applies 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element.

rotateX(angle) defines 3D rotation along the X axis.

rotateY(angle) defines 3D rotation along the Y axis.

rotateZ(angle) defines a 3D rotation along the Z axis.

With the @keyframes rule, you can create animations.

The principle of creating animation is to gradually change one set of CSS styles into another set of styles.

The animation property is a shorthand property for setting six animation properties:

animation: name duration timing-function delay iteration-count direction;

Copy after login

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
img{
animation:fadenum 5s ;
}
@keyframes fadenum{
   100%{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<img  src="1118.01.png"   style="max-width:90%" alt="How to achieve card flip effect in css3" >
</body>
</html>

Copy after login

Output result

How to achieve card flip effect in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to achieve card flip effect in css3. For more information, please follow other related articles on the PHP Chinese website!