jQuery的CSS方法rotate可以讓元素以指定的度數旋轉,這樣可以讓網頁更加生動有趣。
// 將元素旋轉45度 $("selector").css("transform", "rotate(45deg)"); // 將元素旋轉到橫置狀態 $("selector").css("transform", "rotate(90deg)"); // 將元素按照動態值旋轉 var rotateDegree = 30; $("selector").css("transform", "rotate(" + rotateDegree + "deg)");
值得注意的是,jQuery的CSS方法rotate只能通過transform屬性來實現,其它的方法如設置rotate屬性、設置filter來控制元素的旋轉是無效的。
如果需要讓元素以動畫的形式旋轉,可以使用jQuery的animate方法,并設置元素的CSS屬性。下面是一個以animate方法實現的元素旋轉動畫的示例:
// 以1000ms的時間將元素旋轉到45度 $("selector").animate({ transform: 'rotate(45deg)' }, 1000);
除了rotate方法,jQuery的CSS方法還有其它很多有趣的功能,如改變元素的顏色、尺寸等等,可以大大提升網頁的用戶體驗。大家可以結合實際的需求,熟練掌握這些方法,讓網頁更加生動有趣。