How to achieve constant rotation of div using css

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!