Home > Article > Web Front-end > CSS3 implements tilt and rotation animation effects
This time I will bring you CSS3 tilt and rotation animation effect, what are the precautions to achieve CSS3 tilt and rotation animation effect, the following is a practical case, let's take a look one time.
Let’s take a look at the effect of static first, the effect after running will be better
The sample code is as follows
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>css3学习</title>
<style type="text/css">
.d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue;
-webkit-animation:abc 2s infinite linear;
animation:abc 2s infinite linear;
}
/*chrome,Safari,ff,o测试没问题，IE11一闪一闪的*/
@keyframes abc{
0% {transform:skew(20deg) rotate(0deg);}
50% {transform:skew(20deg) rotate(180deg);}
100% {transform:skew(20deg) rotate(360deg);}
}
@-webkit-keyframes abc{
0% {-webkit-transform:skew(20deg) rotate(0deg);}
50% {-webkit-transform:skew(20deg) rotate(180deg);}
100% {-webkit-transform:skew(20deg) rotate(360deg);}
}
</style>
</head>
<body>
<p id="abc" class="d"></p>
</body>
</html>
##I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website! Recommended reading:
The left side is fixed and the right side is adaptive layout method
Waterfall flow layout and infinite loading picture album effect
IE compatible solution for opacity transparency filter
The above is the detailed content of CSS3 implements tilt and rotation animation effects. For more information, please follow other related articles on the PHP Chinese website!