CSS3旋轉動畫可以使網頁元素沿著某一方向旋轉一定角度,增加網頁的生動感和視覺效果。下面介紹如何使用CSS3實現一個旋轉90度的動畫效果。
.rotate90{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
以上代碼使用了CSS3的transform屬性,其中rotate表示旋轉,90deg表示旋轉90度,-webkit-transform,-moz-transform,-o-transform是不同瀏覽器私有的前綴,以保證兼容性。
接下來給一個簡單的例子:
旋轉動畫 CSS3旋轉動畫
在以上代碼中,我們給一個div加上class="rotate90",就可以達到旋轉90度的動畫效果了。
總之,CSS3旋轉動畫的實現方法很簡單,只需要使用transform屬性的rotate子屬性即可,切記對不同瀏覽器加上相應前綴,以保證兼容性,這樣就可以輕松地讓網頁元素旋轉動起來了。
上一篇css3新特性ppt
下一篇mysql查詢地鐵線路