Home > Article > Web Front-end > How to rotate an image and reverse it back with css
How to rotate an image and reverse it back with css
- WBOYOriginal
- 2021-12-10 18:44:303439browse
Method: 1. Use the "animation: name time" style to bind animation to the picture element; 2. Use the "@keyframes name {50%{transform:rotate(rotation angle value);}}" statement, Set the animation action of image rotation to achieve the effect of image rotation and reverse back.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to rotate and reverse an image in css
In css, you can use the animation attribute to bind animation to an element. The animation attribute You can control the animation duration and times. The syntax is:
animation: name duration timing-function delay iteration-count direction;
In CSS, you can use the animation attribute and @keyframes rules to achieve the animation effect of element scaling. Through @keyframes rules, you can create animations.
The principle of creating animation is to gradually change one set of CSS styles into another set of styles. You can change this set of CSS styles multiple times during the animation.
Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.
Use the transform attribute with the rotate() function to set the rotation animation action.
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>
div{
width:100px;
height:100px;
background-color:pink;
overflow:hidden;
animation:fadenum 5s ;
}
@keyframes fadenum{
50%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div><img src="1118.02.png" alt=""></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to rotate an image and reverse it back with css. For more information, please follow other related articles on the PHP Chinese website!