css做旋转动画

CSS做旋转动画是网页设计中常用的一种效果，让页面看起来更加炫酷，给用户带来更好的体验。

想要实现旋转动画，需要使用到CSS3的transform属性，其中最常用的是rotate属性，可以改变元素的旋转角度。

.selector {
        transform: rotate(30deg);
}

上面的代码使得选择器selector旋转30度，如果希望匀速旋转可以使用CSS的animation属性，结合@keyframes规则实现。

.selector {
        animation: rotate 1s linear infinite;
}
@keyframes rotate {
    0% {
            transform: rotate(0deg);
    }
    100% {
            transform: rotate(360deg);
    }
}

这段代码实现了选择器selector以每秒1s匀速旋转，直到页面关闭。@keyframes规则定义旋转效果，在0%时元素不旋转，而在100%时旋转360度。

需要注意的是，使用transform属性旋转元素后，旋转中心默认在元素的中心点，可以通过添加transform-origin属性改变旋转中心。

.selector {
        transform: rotate(30deg);
        transform-origin: top left;
}
    

上面的代码将旋转中心变为元素左上角，实现了一个不同于默认的旋转效果。

CSS可以完成非常丰富的旋转动画，只需要熟练使用transform属性和animation属性，再加上一些创意，就能让页面更加生动有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！