怎么用CSS3實現圖標旋轉效果

本篇內容主要講解“怎么用CSS3實現圖標旋轉效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用CSS3實現圖標旋轉效果”吧!

CSS3有個transform，它可以使將目標對象變形、轉換、改變。應用于需要轉換角度、變換大小等場景，如圖標旋轉、背景放大與縮小等，簡而言之，transform就是變形、改變之意，它屬于CSS3的高級技術。

本文結合實例，給大家簡述一個常見的transform應用，就是當我們用鼠標滑向圖標按鈕時，圖標會自動旋轉一周，這個效果完全不依賴JS，由css3的transform就可以完成。

Transform簡介

在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

1、旋轉rotate() ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），angle是指旋轉角度，如果設置的值為正數表示順時針旋轉，負數則表示逆時針旋轉。如：transform:rotate(30deg)。

2、扭曲skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，默認為0deg。

3、縮放scale([, ])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。如果第二個參數未提供，則取與第一個參數一樣的值。scale(X,Y)是用于對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。并以X為準。如：transform:scale(2,1.5)。

4、移動translate([, ]) ：通過矢量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數，ty 是第二個過渡值參數選項。如果 未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對象進行平移，按照設定的x,y參數值,當值為負數時，反方向移動物體，其基點默認為元素 中心點，也可以根據transform-origin進行改變基點。如transform:translate(100px,20px)。

5、矩陣變形matrix(, , , , , ) ： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。

實例：圖標旋轉

要將圖標旋轉，只需使用transform的rotate以及transition即可完成旋轉的動畫效果。本例中，我們準備兩張圖片作為背景圖片，當鼠標滑向圖標時，圖標做360度旋轉運動，html結構如下：

<ul class="icos"> <li class="female"><a href="#"><i></i>女生</a></li> <li class="arrow"><a href="#"><i></i>箭頭</a></li> </ul>

結合以下CSS3即可完成圖標旋轉效果。

ul { width: 145px; margin: 0 auto; list-style: none; font-size: 30px; } li{padding:10px } li a{width:145px;height:42px;line-height:36px;display:block;color:#333} li a:hover{text-decoration:none} li a i { background: url(icon.png) no-repeat; display: block; width: 42px; height: 32px; position: relative; z-index: 10; float:left; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } li a:hover i { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } li.female a i { background-position: 0 0; } li.arrow a i { background-position: 0 -50px; }

到此，相信大家對“怎么用CSS3實現圖標旋轉效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！