您好,登錄后才能下訂單哦!
這篇文章主要講解了“CSS3的常見transformation圖形變化用法整理”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“CSS3的常見transformation圖形變化用法整理”吧!
1.rotate旋轉(zhuǎn)
旋轉(zhuǎn)圖片,單位deg,為“度”的意思
CSS Code復(fù)制內(nèi)容到剪貼板
-moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg);
2.scale放大縮小
按比例放大縮小,如 “1.6” 為放大 1.6 倍,若 “-1.6” 則縮小 1.6 倍
CSS Code復(fù)制內(nèi)容到剪貼板
-webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6);
3.translate平移
translate 為指定對(duì)象的平移,具有兩個(gè)參數(shù),第一個(gè)為 x 軸方向平移,第二個(gè)為 y 軸方向平移。如果第二個(gè)參數(shù)未提供,則默認(rèn)值為 0 。
例如,需要設(shè)置一個(gè)元素在鼠標(biāo)懸停時(shí)進(jìn)行 x 軸方向 30px 和 y 軸方向 20px 的平移,可以這樣編寫:
CSS Code復(fù)制內(nèi)容到剪貼板
#translate-demo:hover {
-webkit-transform: translate(30px, 20px);
-moz-transform: translate(30px, 20px);
-o-transform: translate(30px, 20px);
-ms-transform: translate(30px, 20px);
transform: translate(30px, 20px);
}
這里必須說明一點(diǎn),最新版本的主流現(xiàn)代瀏覽器(Kayo 測(cè)試的是 Chrome 22.0.1229.94 , Firefox 17.0.1 , Safari 5.1.7 , Opera 12.12)除 webkit 內(nèi)核的 Chorme 和 Safari 外都不需要通過私有屬性才能支持 transform 了,但由于早期的現(xiàn)代瀏覽器中 transform 屬性都需要通過各自的私有屬性支持,因此為了盡量兼容早期版本的瀏覽器,在實(shí)際項(xiàng)目中使用 transform 時(shí)最好使用各自的私有屬性,同時(shí)為了向后兼容,需要加上沒有私有屬性的調(diào)用。
4.skew傾斜
skew 指定元素斜切扭曲,即元素圍繞 x 軸和 y 軸進(jìn)行傾斜,具有兩個(gè)參數(shù),第一個(gè)對(duì)應(yīng) x 軸方向的傾斜角度,第二個(gè)對(duì)應(yīng) y 軸方向傾斜角度。如果第二個(gè)參數(shù)未提供,則默認(rèn)值為 0 。skew 與 scale 有點(diǎn)相似,但 scale 只旋轉(zhuǎn)元素,不會(huì)對(duì)元素形狀作出改變,而 skew 則會(huì)使到元素的形狀發(fā)生改變。
例如,需要設(shè)置一個(gè)元素在鼠標(biāo)懸停時(shí)進(jìn)行 x 軸方向 30 度和 y 軸方向 30 度的斜切扭曲,可以這樣編寫:
CSS Code復(fù)制內(nèi)容到剪貼板
#skew-demo:hover {
-webkit-transform: skew(30deg, 30deg);
-moz-transform: skew(30deg, 30deg);
-o-transform: skew(30deg, 30deg);
-ms-transform: skew(30deg, 30deg);
transform: skew(30deg, 30deg);
}
值得注意的是,由于 translate、skew 以及上文提到的 scale 都是以 x、y 軸相關(guān)的值作為參數(shù),因此為了方便起見,W3C 還提供了 translateX 和 translateY 、skewX 和 skewY 以及 scaleX 和 scaleY 方法,分別用于獨(dú)立設(shè)置 x 軸和 y 軸方向上的效果。
5.matrix矩陣
matrix 即矩陣,這里具體使用的是一個(gè) 3*3 矩陣。
用矩陣表示屬性值?
是的,除了 transform 外,CSS3 中另外還有一些屬性以 matrix 作為屬性值,實(shí)際上,matrix 是 transform 中最基本而又最強(qiáng)大的值,上面的 translate 和 skew 以及之前介紹過的 rotate 和 scale 在底層都是通過 matrix 實(shí)現(xiàn)的,因此實(shí)際上所有的 transform 值都可以通過一個(gè) 3*3 矩陣表示。
我們知道,transform 是在 x、y 坐標(biāo)系上的 2D 變換,因此實(shí)際上變換就是元素上每一個(gè)點(diǎn)通過一個(gè)變換等式進(jìn)行變化,再產(chǎn)生新的坐標(biāo)值的過程。因此我們?cè)O(shè)置舊的 x、y 坐標(biāo)值分別為 XprevCoordSys 和 YprevCoordSys ,新的 x、y 坐標(biāo)值分別為 XnewCoordSys 和 YnewCoordSys ,由于變換在 2D 中進(jìn)行,因此 z 坐標(biāo)值設(shè)為 1 即可。這時(shí)再另設(shè) matrix 為如下的一個(gè)矩陣,
則舊的坐標(biāo)值、新的坐標(biāo)值與 matrix 中存在如下關(guān)系:
即新舊值之間可以通過矩陣連成等式,因此開發(fā)者只需要設(shè)定好 matrix 的值,就可以寫出自定義的變換了。接下來需要注意,雖然 matrix 是一個(gè) 3*3 矩陣,在實(shí)際使用時(shí)只需填寫6個(gè)參數(shù)(另外3個(gè)與 x、y 軸無關(guān)),并且調(diào)用時(shí)需要用如下的順序 [a b c d e f]
例如編寫如下語句:
CSS Code復(fù)制內(nèi)容到剪貼板
#matrix-demo:hover {
-webkit-transform: matrix(1, 1, 0, 1, 0, 0);
-moz-transform: matrix(1, 1, 0, 1, 0, 0);
-o-transform: matrix(1, 1, 0, 1, 0, 0);
-ms-transform: matrix(1, 1, 0, 1, 0, 0);
transform: matrix(1, 1, 0, 1, 0, 0);
}
這樣在鼠標(biāo)懸停時(shí)元素會(huì)在 y 軸方向上拉伸(即相當(dāng)于 skewY(45deg) 的效果)。
另外如果同時(shí)使用兩個(gè)或以上的 transform 方法,可以把它們合并書寫。
感謝各位的閱讀,以上就是“CSS3的常見transformation圖形變化用法整理”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)CSS3的常見transformation圖形變化用法整理這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。