一、使用CSS3的transform屬性
1、使用CSS3的transform屬性可以為元素添加旋轉效果。
2、使用rotate()函數可以控制元素沿著中心點旋轉。
3、示例代碼如下：
.rotate {
transform: rotate(45deg);
}
二、使用JavaScript的setInterval函數
1、使用Javascript的setInterval函數可以為元素添加動態旋轉效果。
2、使用Math.PI計算旋轉弧度。
3、示例代碼如下：
var element = document.querySelector('.rotate');
var angle = 0;
setInterval(function() {
angle += 0.1;
element.style.transform = 'rotate(' + angle + 'rad)';
}, 10);
三、使用jQuery的animate方法
1、使用jQuery的animate方法可以為元素添加動態旋轉效果。
2、使用easing參數可以控制元素的旋轉動畫效果。
3、示例代碼如下：
var element = $('.rotate');
setInterval(function() {
element.animate({
rotate: '+=30deg'
}, 1000, 'easeInOutCubic');
}, 1000);
四、使用CSS3的animation屬性
1、使用CSS3的animation屬性可以為元素添加動態旋轉效果。
2、使用@keyframes控制動畫的關鍵幀。
3、示例代碼如下：
.rotate {
animation: rotate 1s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/160985.html
微信掃一掃 
支付寶掃一掃 