您好,登錄后才能下訂單哦!
這篇文章主要講解了“css3的變形功能類(lèi)型有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“css3的變形功能類(lèi)型有哪些”吧!
css3的變形功能包括4種類(lèi)型:1、旋轉(zhuǎn),利用rotate()、rotateX()等實(shí)現(xiàn);2、縮放,利用scale()、scaleX()等實(shí)現(xiàn);3、傾斜,利用skew()、skewX()等實(shí)現(xiàn);4、移動(dòng),利用translate()等實(shí)現(xiàn)。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
變形主要值得是利用transform功能來(lái)實(shí)現(xiàn)文字或圖片的旋轉(zhuǎn),縮放,傾斜,移動(dòng)這四種處理。
1、旋轉(zhuǎn)-----transform:rotate(xxdeg);
( IE9以上,safari 3.1以上,chrome 8以上、FireFox 4以上、Opera 10以上的瀏覽器都支持這些屬性)
先看例子:
<p id="test3"> 這是一個(gè)測(cè)試。 </p> #test3{ width:300px; margin: 100px auto; font-size: 40px; transform:rotate(45deg); }
transform:rotate(45deg);這句表示p元素順時(shí)針45度旋轉(zhuǎn),deg是一個(gè)角度單位。效果如下:
2、縮放-----transform:scale(x)
<p id="test4"> 這是一個(gè)測(cè)試。 </p> #test4{ width:300px; margin: 100px auto; font-size: 40px; transform:scale(0.5); }
也可以分別指定元素水平和垂直方向上的縮放。例如,元素在水平方向縮小50%,在垂直方向放大一倍:
<p id="test5"> 這是一個(gè)測(cè)試。 </p> #test5{ width:300px; margin: 100px auto; font-size: 40px; transform:scale(0.5,2); }
上面兩個(gè)縮放的效果如下:
3、傾斜:使用skew方法來(lái)實(shí)現(xiàn)文字或圖片的傾斜處理,兩個(gè)參數(shù)分別指定水平方向上的傾斜角度和垂直方向的傾斜角度。例子:
<p id="test6"> 這是一個(gè)測(cè)試。 </p> #test6{ width:300px; margin: 100px auto; font-size: 40px; transform:skew(30deg,45deg); }
若只有一個(gè)參數(shù),默認(rèn)只在水平方向上傾斜,不在垂直方向傾斜。
4、移動(dòng):使用translate方法,兩個(gè)參數(shù)分別指定水平方向和垂直方向上的移動(dòng)距離。若只有一個(gè)參數(shù),默認(rèn)只在水平方向上移動(dòng),垂直方向上不移動(dòng)。
<p id="test7"> 這是一個(gè)測(cè)試。 </p> #test7{ width:300px; margin: 100px auto; font-size: 40px; transform:translate(150px,150px); }
這些變形也可以組合使用:
<p id="test8"> 這是一個(gè)測(cè)試。 </p> #test8{ width:300px; margin: 100px auto; font-size: 40px; transform:rotate(45deg) scale(0.5) skew(30deg,45deg) translate(150px,150px); }
將元素45度順時(shí)針旋轉(zhuǎn),在縮小一半,然后在水平方向傾斜30度,在垂直方向傾斜45度,在分別在水平和垂直方向上移動(dòng)150px,效果如下:
可以指定變形的基點(diǎn):在使用transform進(jìn)行變形時(shí),是以元素的中心為基準(zhǔn)點(diǎn)進(jìn)行的。使用transform-origin屬性可以改變基準(zhǔn)點(diǎn)。
<p id="test9"> 這是一個(gè)測(cè)試。 </p> <p id="test10"> 這是一個(gè)測(cè)試。 </p> #test9{ position: absolute; width:150px; height:150px; background: green; margin: 100px 200px; font-size: 20px; transform:rotate(45deg); }#test10{ position: absolute; width:150px; height:150px; background: red; margin: 100px 200px; font-size: 20px; transform-origin:left top; /*定基準(zhǔn)點(diǎn)*/ transform:rotate(45deg) }
效果如下:(紅色是把基準(zhǔn)點(diǎn)頂?shù)阶笊宵c(diǎn)的,綠色是默認(rèn)的)
transform-origin屬性的取值,前一個(gè)是“基準(zhǔn)點(diǎn)在元素水平方向上的位置”,可以指定的值有:left,center,right;后一個(gè)值是“基準(zhǔn)點(diǎn)在元素垂直方向上的位置”,可以指定的值有:top,center,bottom.
感謝各位的閱讀,以上就是“css3的變形功能類(lèi)型有哪些”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)css3的變形功能類(lèi)型有哪些這一問(wèn)題有了更深刻的體會(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)容。