Css method to realize constant rotation of div: first create a div element and give it an id value; then use inline styles to add some styles to the div; then use the "@keyframes" rule to create an animated rotate; Finally, specify animation for the div.
The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.
Related recommendations: "css video tutorial"
css to realize div rotation all the time
1. First create a div element , and give it an id value xuanzhuan, use inline styles to add some styles to the div.
<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">
2. Then use the @keyframes rule to create an animation rotate
@-webkit-keyframes rotate{
from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{
from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{
from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}3. Finally, specify animation for the div.
#xuanzhun{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}Effect:
The above is the detailed content of How to achieve constant rotation of div using css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
