建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
本篇內(nèi)容主要講解“怎么用CSS3實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用CSS3實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)效果”吧!
CSS3有個(gè)transform，它可以使將目標(biāo)對(duì)象變形、轉(zhuǎn)換、改變。應(yīng)用于需要轉(zhuǎn)換角度、變換大小等場(chǎng)景，如圖標(biāo)旋轉(zhuǎn)、背景放大與縮小等，簡(jiǎn)而言之，transform就是變形、改變之意，它屬于CSS3的高級(jí)技術(shù)。
本文結(jié)合實(shí)例，給大家簡(jiǎn)述一個(gè)常見(jiàn)的transform應(yīng)用，就是當(dāng)我們用鼠標(biāo)滑向圖標(biāo)按鈕時(shí)，圖標(biāo)會(huì)自動(dòng)旋轉(zhuǎn)一周，這個(gè)效果完全不依賴(lài)JS，由css3的transform就可以完成。
Transform簡(jiǎn)介
在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix。
1、旋轉(zhuǎn)rotate() ：通過(guò)指定的角度參數(shù)對(duì)原元素指定一個(gè)2D rotation（2D 旋轉(zhuǎn)），angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg)。
2、扭曲skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無(wú)斜切。skew是用來(lái)對(duì)元素進(jìn)行扭曲變行，第一個(gè)參數(shù)是水平方向扭曲角度，第二個(gè)參數(shù)是垂直方向扭曲角度。其中第二個(gè)參數(shù)是可選參數(shù)，默認(rèn)為0deg。
3、縮放scale([, ])：提供執(zhí)行[sx,sy]縮放矢量的兩個(gè)參數(shù)指定一個(gè)2D scale（2D縮放）。如果第二個(gè)參數(shù)未提供，則取與第一個(gè)參數(shù)一樣的值。scale(X,Y)是用于對(duì)元素進(jìn)行縮放，可以通過(guò)transform-origin對(duì)元素的基點(diǎn)進(jìn)行設(shè)置，同樣基點(diǎn)在元素中心位置；基中X表示水平方向縮放的倍數(shù)，Y表示垂直方向的縮放倍數(shù)，而Y是一個(gè)可選參數(shù)，如果沒(méi)有設(shè)置Y值，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。如：transform:scale(2,1.5)。
4、移動(dòng)translate([, ]) ：通過(guò)矢量[tx, ty]指定一個(gè)2D translation，tx 是第一個(gè)過(guò)渡值參數(shù)，ty 是第二個(gè)過(guò)渡值參數(shù)選項(xiàng)。如果 未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對(duì)象進(jìn)行平移，按照設(shè)定的x,y參數(shù)值,當(dāng)值為負(fù)數(shù)時(shí)，反方向移動(dòng)物體，其基點(diǎn)默認(rèn)為元素 中心點(diǎn)，也可以根據(jù)transform-origin進(jìn)行改變基點(diǎn)。如transform:translate(100px,20px)。
5、矩陣變形matrix(, , , , , ) ： 以一個(gè)含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個(gè)2D變換，相當(dāng)于直接應(yīng)用一個(gè)[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學(xué)中的矩陣。
實(shí)例：圖標(biāo)旋轉(zhuǎn)
要將圖標(biāo)旋轉(zhuǎn)，只需使用transform的rotate以及transition即可完成旋轉(zhuǎn)的動(dòng)畫(huà)效果。本例中，我們準(zhǔn)備兩張圖片作為背景圖片，當(dāng)鼠標(biāo)滑向圖標(biāo)時(shí)，圖標(biāo)做360度旋轉(zhuǎn)運(yùn)動(dòng)，html結(jié)構(gòu)如下：
結(jié)合以下CSS3即可完成圖標(biāo)旋轉(zhuǎn)效果。
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; }
到此，相信大家對(duì)“怎么用CSS3實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)效果”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！
當(dāng)前文章：怎么用CSS3實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)效果-創(chuàng)新互聯(lián)
文章來(lái)源：http://www.dlmjj.cn/article/cddjhj.html
