Home > Article > Web Front-end > How to achieve card flip effect in css3
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);}}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
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;
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>Output result
(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!