瀏覽網頁時,當滑鼠滑過某一個圖片,隨即圖片發生動態變化,這樣的效果總是能讓人很新奇,並且引人注目。那麼如此酷炫的效果是怎麼實現的呢?這個肯定是離不開強大的css3功能。不僅可以css3圖片旋轉也可以實現css旋轉放大、css旋轉90度、css圖片旋轉45度等特效。
那麼本篇文章給大家介紹了關於滑鼠滑過圖片時出現旋轉後不同特效的介紹。
具體程式碼範例如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css旋轉效果測試</title> <style type="text/css"> div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; float: left; font-size: 12px; text-align: center; color:#000; } /*效果一:90°旋轉 修改rotate(旋轉度數)*/ .img1 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img1:hover { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); } /*效果二:放大 修改scale(放大的值)*/ .img2 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img2:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } /*效果三:旋轉放大 修改rotate(旋轉度數) scale(放大值)*/ .img3 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img3:hover { transform: rotate(360deg) scale(1.2); -webkit-transform: rotate(360deg) scale(1.2); -moz-transform: rotate(360deg) scale(1.2); -o-transform: rotate(360deg) scale(1.2); -ms-transform: rotate(360deg) scale(1.2); } /*效果四:上下左右移動 修改translate(x軸,y軸)*/ .img4 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img4:hover { transform: translate(0, -10px); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); } /*效果五:360°旋轉 修改rotate(旋轉度數)*/ .img5 { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .img5:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } </style></head><body><div class="img1">90度旋轉 </div><div class="img2">放大</div><div class="img3">旋轉放大</div><div class="img4">上下左右移動 </div><div class="img5">360度旋轉 </div></body></html>
效果如:
希望本篇關於css旋轉動畫介紹,對需要的朋友有所協助!