[分享]css3怎么设置旋转

CSS3是一种前端样式语言，可以为网页中的元素设置各种样式效果，包括旋转效果。下面的代码展示了如何使用CSS3实现旋转效果。/ 缩放动画 / .box { width: 100px; height: ...

CSS3是一种前端样式语言，可以为网页中的元素设置各种样式效果，包括旋转效果。下面的代码展示了如何使用CSS3实现旋转效果。

/* 缩放动画 */
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        margin: 50px auto;
        animation: rotate 2s infinite linear;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style> 

上述代码中，我们为一个名为“box”的div元素设置了基本样式，包括宽高和背景颜色等。然后我们使用关键帧动画“rotate”来控制元素旋转的动作。其中，“from”表示起始状态，即0度旋转，而“to”则表示元素旋转一周之后的状态，即360度旋转。最后，在box类名下设置动画属性“animation: rotate 2s infinite linear;”，表示动画的名称为“rotate”，持续时间为2秒，无限循环，线性运动。

通过以上CSS3代码，我们实现了一个简单的元素旋转效果，让网页更加生动有趣。如需设置不同的旋转速度和方向，可以修改animation属性和transform属性中的数值。