利用CSS3的transiton屬性，進行控件的旋轉，并通過設置旋轉時間，實現特效。

效果連接：http://runjs.cn/detail/vkmy8obr

實例代碼：直接復制進html執行即可 無需引入其他文件

<style>.dh {width: 100px;height: 100px;position: relative;}.dh:before, .dh:after {content: "";width: 100px;height: 16px;border-radius: 8px;background-color: #000;position: absolute;transition: all 0.15s ease-in-out; /*設置旋轉持續時間*/-webkit-transition: all 0.15s ease-in-out;/*兼容性處理等同于上代碼*/}.dh:before {top: 0;box-shadow: 0 42px #000;}.dh:after {bottom: 0;}.dh:hover:before {top: 42px;box-shadow: none;transform: rotate(225deg);/*順時針旋轉225度*/-webkit-transition: rotate(225deg);/*兼容性處理等同于上代碼*/}.dh:hover:after {bottom: 42px;transform: rotate(135deg);/*順時針旋轉135度*/-webkit-transition: rotate(135deg);/*兼容性處理等同于上代碼*/}</style><div class="dh"> </div>

總結

以上是生活随笔為你收集整理的HTML5、CSS3实现旋转特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。