網站首頁關于我們建站流程手機網站營銷型網站解決方案新推薦風格特價網站聯系我們
css3 介紹
css3 介紹
原文鏈接://www.jianshu.com/p/17e289fcf467
CSS 里 transform 變形這個屬性有點學習難度,尤其在 CSS3 里加上了 3D 效果之后,2 維變 3 維學習成本更是成倍提高。為什么設計師的眼里飽含著淚水,因為對頁面效果愛的深沉。本篇就介紹一下 transform。 —— 由gesang分享
CSS里transform變形這個屬性有點學習難度,尤其在CSS3里加上了3D效果之后,2維變3維學習成本更是成倍提高。為什么設計師的眼里飽含著淚水,因為對頁面效果愛的深沉。本篇就介紹一下transform。(擎天柱:Autobot transform!)
 
transform本質上是一系列變形函數,分別是translate位移,scale縮放,rotate旋轉,skew扭曲,matrix矩陣。戒驕戒躁,我們一個個講。
 
前置屬性:
transform-origin
transform-style
perspective
perspective-origin
backface-visibility
2D變形:
translate
scale
rotate
skew
matrix
3D變形:
translate3d
scale3d
rotate3d
matrix3d
層級影響
前置屬性
 
transform-origin
 
用于指定元素變形的中心點。默認中心點就是元素的正中心,即XYZ軸的50% 50% 0處??梢醞ü檬糶愿謀湓卦赬YZ軸的中心點,正值表示正向位移,負值表示負向位移。(XYZ軸的正向分別是往右,往下,靠近用戶眼睛。反之為反向)
 
表示2維的x-offset/y-offset可以設px值也可以設%百分比,也可設top / right / bottom / left / center等keyword。表示3維的z-offset只能設px值,不能設%百分比,也沒有keyword。
 
默認中心點在元素正中心,因此關鍵字top等價于top center等價于50% 0%(x軸仍舊留在50%處,y軸位移到0%處)。同理各關鍵字例如right等價于right center等價于100% 50%,不多贅述。
 
一圖勝千言:為圖片設置不同的中心點后,看它們旋轉,扭曲,縮放的效果。例如圖1表頭的第一行center表示transform-origin: center。第二行rotate(30deg);表示transform: rotate(30deg);。
 
 
另外transform-origin指定變形中心點對translate位移沒有影響。translate位移始終相對于元素正中心進行位移,有懷疑精神的可以自己試一下。
 
transform-style
 
這個屬性比較簡單只有兩個值flat和preserve-3d。用于指定舞臺為2D或3D,默認值flat表示2D舞臺,所有子元素2D層面展現。preserve-3d看名字就知道了表示3D舞臺,所有子元素在3D層面展現。注意,在變形元素自身上指定該屬性是沒有用的,它用于指定舞臺,所以要在變形元素的父元素上設置該屬性。設定后,所有子元素共享該舞臺。一圖勝千言:
 
 
.div1 {
    float: left;
    background-color: red;
    transform: perspective(200px) rotateY(45deg);
}
.div1 img{
    transform: translateZ(16px);
}
.p3d {
    transform-style: preserve-3d;
}
<div><img src="head75.png"></div>
<div><img src="head75.png"></div>
兩圖唯一的區別是:右圖的父div上設了transform-style: preserve-3d;,因此呈現了3d效果。左圖的父div沒有設transform-style默認是flat,因此元素不會在Z軸展開(translateZ(16px)失效),只能呈現2D效果。
 
另外如果同時設了transform-style: preserve-3d;和overflow: hidden;,3D效果將失效,等價于transform-style: flat;。如果你發現3D效果沒有像預想地那樣出現,可以檢查一下(包括祖先元素)是否有overflow: hidden;,該屬性將flatten everything…
 
perspective
 
指定3D的視距。默認值是none表示無3D效果,即2D扁平化。上面例子代碼里其實已經用到過該屬性了。介紹它之前,先借用rotateX / rotateY / rotateZ來明確一下xyz軸坐標的基本概念。一圖勝千言,依次是rotateX軸旋轉,rotateY軸旋轉,rotateZ軸旋轉:
 
 
.x {
    transform: perspective(200px) rotateX(60deg);
}
.y {
    transform: perspective(200px) rotateY(60deg);
}
.z {
    transform: perspective(200px) rotateZ(60deg);
}
<img src="head75.png">
<img src="head75.png">
<img src="head75.png">
從圖中也可以看出,烤羊肉串就是x軸旋轉,鋼管舞就是y軸旋轉,彩票轉盤就是z軸旋轉。上面z軸只是一個點,想象一下就能明白,該點其實是一根垂直于屏幕的線,而perspective視距就是該線從屏幕到用戶眼睛的距離。
 
實現3D的關鍵就是要有perspective視距,如果將上述代碼中perspective(200px)去掉,效果如下:
 
 
除了z軸旋轉不受影響外,xy軸雖然還在旋轉,但失去了3D效果,是2D扁平化的旋轉。原因就是因為不設perspective的話,其默認值為none,沒有視距沒有3D。
 
perspective只能設px值,不能設%百分比。值越小表示用戶眼睛距離屏幕越近,相當于創建一個較大的3D舞臺。反之,值越大表示用戶眼睛距離屏幕越遠,相當于創建一個較小的3D舞臺。這很容易理解,離的越近東西看起來越大,離的越遠東西看起來越小。但具體該怎么設呢?借用W3C的圖配合translateZ來幫助理解視距。
 
 
圖中d就是perspective視距,Z就是translateZ軸的位移。Z軸正向位移時,3D舞臺將放大。反之,Z軸負向位移時,3D舞臺將縮小。上圖Z是d的一半,因此3D舞臺上的元素將是原來的2倍。下圖Z同樣是d的一半,但由于是負值,所以3D舞臺上的元素將縮小三分之一。實際試試:
 
 
.divsp {
    display: inline-block;
    border: 1px blue dashed;
    margin-left: 30px;
    perspective: 100px;
}
.z1 {
    transform: translateZ(-75px);
}
.z2 {
    transform: translateZ(0px);
}
.z3 {
    transform: translateZ(25px);
}
.z4 {
    transform: translateZ(101px);
}
<div><img src="head75.png"></div>
<div><img src="head75.png"></div>
<div><img src="head75.png"></div>
<div><img src="head75.png"></div>
4張圖的視距都是100px,表示4張圖的3D舞臺距離你的眼睛100px。我們從右往左來理解。圖4的translateZ(101px)看到圖片消失了,因為3D舞臺距離你眼睛100px,而圖片從舞臺往Z軸正向位移101px,圖片到了你腦袋后面自然什么都看不見。如果設成translateZ(100px),相當于圖片緊貼著你的眼睛,所以全屏都是圖片。圖3的translateZ(25px),原始圖片為75px,放大后的圖片為100px。這是道初中數學題,你可以畫一個底邊是75px(圖片原始尺寸),高是75px(視距100px-Z軸位移25px=75px)的等腰三角形,然后高擴展到100px,底邊將等比例擴大3分之1至100px。圖2的translateZ(0px)表示Z軸沒有位移,因此仍舊是原始大小。圖4的translateZ(-75px),同樣是道初中數學題,原始圖片為75px,縮小到42.85px,再看看上面W3C的圖理解一下,很容易算出來。
 
仔細看代碼的可以看出來,上面介紹XYZ軸旋轉時是直接在變形元素img上指定的transform: perspective(200px) rotateX(60deg);。而上面的代碼是給變形元素img的父div指定perspective: 100px;。你可以理解為前一種方式是perspective()函數,后一種方式是perspective屬性。兩種指定方式是有區別的:
 
前者perspective()函數指定只針對當前變形元素,需要和transform其他函數一起使用,僅表示當前變形元素的視距。
后者perspective屬性指定用于3D舞臺,即3D舞臺的視距,里面的子元素共享這個視距
perspective-origin
 
設置視距的基點,看W3C的圖就能明白
 
 
基點默認值是50% 50%即center,表示視距基點在中心點不進行任何位移。你可以讓基點在XY軸上進行位移,產生上圖那樣的效果。注意該屬性同樣應該定義在父元素上,適用于整個3D舞臺。它需要和perspective屬性結合著一起用。效果如下圖:
 
 
.td1 { 
    transform-style: preserve-3d;
    perspective: 200px;
    perspective-origin: center;
}
為節約篇幅,只貼出來圖1的3D舞臺的配置,其余8圖只需根據表頭修改perspective-origin即可。根據上面9宮格圖就比較容易理解perspective-origin視距基點的意思了。默認值50% 50%即center表示眼睛在舞臺正中心。然后根據XY軸的位移量,或關鍵字left(等價于x軸0%)等,調整眼睛看3D舞臺的位置。
 
backface-visibility
 
用于是否可以看見3D舞臺背面,默認值visible表示背面可見,可以設成hidden讓背面不可見。通常當旋轉時,如果不希望背面顯示出來,該屬性就很有用,設成hidden即可。一圖勝千言:
 
 
.stage{
    float: left;
    margin: 5px;
    perspective: 200px;
}
.container {
    transform-style: preserve-3d;
}
.image {
    backface-visibility: hidden;
}
.front {
    position: absolute;
    z-index: 1;
}
.back {
    transform: rotateY(180deg);
}
.stage:nth-child(1) .container{ transform: rotateY(0deg); }
.stage:nth-child(2) .container{ transform: rotateY(30deg); }
.stage:nth-child(3) .container{ transform: rotateY(60deg); }
.stage:nth-child(4) .container{ transform: rotateY(90deg); }
.stage:nth-child(5) .container{ transform: rotateY(120deg); }
.stage:nth-child(6) .container{ transform: rotateY(150deg); }
.stage:nth-child(7) .container{ transform: rotateY(180deg); }
 
<div>    //為節約篇幅該DOM請無腦復制7個
    <div>
        <img src="head75.png">
        <img src="bg75.png">
    </div>
</div>
DOM結構中就能看出,是兩張圖片(一正一反)疊在了一起。由于變形元素img設了backface-visibility: hidden;,當Y軸旋轉超過90度時(Y軸旋轉正好90度時,正中間圖4為一片空白,就像丁字褲在視線里消失了^_^),正面的圖片將不可見,底下的背面圖片顯示出來了。如果將img的backface-visibility屬性去掉(默認為visibility),效果如下圖。Y軸旋轉超過90度時,將顯示正面的圖片的背部(所謂背部對屏幕來說其實就是圖片矩陣的X軸值取反):
 
 
至此5個前置屬性介紹完畢。它們多用于3D場合,因此常見的3D的HTML結構如下:
 
<舞臺>         //為舞臺加上perspective
    <容器>     //為容器加上preserve-3d,使容器內元素共享同一個3D渲染環境
        <元素> //為元素加上transform效果
    </元素></容器>
</舞臺>
2D變形
 
2D變形有translate位移,scale縮放,rotate旋轉,skew扭曲,matrix矩陣?;鏡哪諶菥筒幌桿盜?,自行參照w3cschool,這里只介紹一些w3cschool上沒有講的內容。
 
translate位移
 
translate位移系列中用于2D的有:translate,translateX,translateY
 
translate位移,類似于position:relative屬性??繕璧ブ?,也可設雙值。正數表示XY軸正向位移,負數為反向位移。設單值表示只X軸位移,Y軸坐標不變,例如transform: translate(100px);等價于transform: translate(100px,0);。這點和CSS中其他單值屬性稍有不同,不要誤以為單值是X軸和Y軸均位移。當然最好還是用雙值,如果真的和Y軸無關,也請用translateX(100px),雖然效果是一樣的,但代碼可讀性更高。同理如果和X軸無關,可以用transform: translateY(100px);等價于transform: translate(0, 100px);
 
上面說了效果類似于position:relative屬性,但和position語義不同,position用于頁面布局,而translate屬于transform中的一個系列,用于元素變形。你可能覺得語義不同有什么卵用,效果OK不就行了?就看你用什么標準來衡量效果了。CSS的神奇之處在于你可以將一個屬性用在完全違背它原意的場景下,拋開代碼可讀性不談,違背原意有時還是會有細微差別的。如結合動畫效果時,translate能小于1px過渡,因此動畫效果更為平滑。但position最小單位就是1px,動畫效果肯定打折扣。另外用translate實現動畫時,可以使用GPU,動畫的FPS更高,而position顯然無法享受這個優勢。其他如回流和重繪也都有差異。因此如果你在該用translate的地方用了position,今后一些需求變動達不到要求,你也沒什么立場可抱怨的了。
 
scale縮放
 
scale縮放系列中用于2D的有:scale,scaleX,scaleY
 
scale縮放,同樣可以設單值和雙值。單值時表示X軸和Y軸等值縮放。默認值為1,要縮小請設0.01~0.99之間的值,要放大請設超過1的值。例如縮小一倍可以transform: scale(.5);,放大一倍可以transform: scale(2);。效果在最上面介紹transform-origin時圖片里已經有了,不多贅述。
 
如果只想X軸縮放,可以用scaleX(.5)相當于scale(.5, 1)。同理只想Y軸縮放,可以用scaleY(.5)相當于scale(1, .5)。
 
設雙值可以實現X軸Y軸不等比例縮放,如transform: scale(.5, 1.5);,原本75*75px的圖片變成了37.5*112.5px大小。如左圖:
 
 
w3cschool上沒說的是,scale還能設負數,負數會先將元素反轉再縮放,如transform: scale(-.5, -1.5);,效果見上面右圖。為何反轉能理解吧?XY軸像素矩陣各值取反后,效果等價于反轉。當然你同樣可以用rotate實現反轉。
 
rotate旋轉
 
rotate旋轉系列中用于2D的有:rotate
 
rotate旋轉,比較簡單,只能設單值。正數表示順時針旋轉,負數表示逆時針旋轉。如transform: rotate(30deg);,效果在最上面介紹transform-origin時圖片里已經有了,不多贅述。(注意和上面不同,在2D層面上沒有rotateX / rotateY,它倆和rotateZ都是3D旋轉)
 
skew扭曲
 
skew扭曲系列中用于2D的有:skew,skewX,skewY
 
skew扭曲可以設單值和雙值。單值時表示只X軸扭曲,Y軸不變,如transform: skew(30deg);等價于transform: skew(30deg, 0);??悸塹嬌啥列?,不推薦用單值,應該用transform: skewX(30deg);。skewY表示只Y軸扭曲,X軸不變。效果在最上面介紹transform-origin時圖片里已經有了,不多贅述。
 
matrix矩陣
 
matrix矩陣前面沒有直接接觸,但卻是所有2D變形的本質,上面所有2D變形效果都可以用matrix矩陣來實現。本篇先略過,將它和3D矩陣matrix3d留到下一篇再介紹。
 
3D變形
 
3D變形有translate3d位移,scale3d縮放,rotate3d旋轉, matrix3d矩陣。(注意skew扭曲是沒有3D的)。3D的用法和2D差不多,只不過多了個Z軸的值而已(這不是廢話么…)。
 
translate3d位移
 
translate3d位移系列中用于3D的有:translate3d,translateZ
 
translate3d(tx,ty,tz),其中tz的Z軸長度只能為px值,不能為%百分比。translateZ等價于translate3d(0,0,tz)。Z軸的值越大表示離眼睛越近,元素就越大,但當值大于perspective視距時元素將消失,因為眼睛無法看見眼睛背后的東西,這在上面介紹perspective時已經介紹過,不再贅述。值越小表示離眼睛越遠,元素就越小。實際使用中translateZ效果和2D的scale縮放效果非常像,但原理是有區別的,translateZ是Z軸上位移,而scale是XY軸的縮放?;故悄薔浠?,盡量將屬性用在符合屬性愿意的場合。
 
scale3d縮放
 
scale3d縮放系列中用于3D的有:scale3d,scaleZ
 
scale3d(sx,sy,sz),其中sz為Z軸的縮放比例,取值同sx,sy一樣,在0.01~0.99時元素縮小,1時大小不變,大于1時元素變大。scaleZ等價于scale(1,1,sz)。需要注意的是單獨使用scale3d或scaleZ不會有任何效果,需要配合其他屬性在3D舞臺上才能出現效果,否則Z軸的縮放比例根本無法定義。
 
rotate3d旋轉
 
rotate3d旋轉系列中用于3D的有:rotate3d,rotateX,rotateY,rotateZ
 
rotate3d(x,y,z,a)這里多了一個參數a(讀音是阿爾法…)表示3D舞臺上旋轉的角度,而xyz的取值為0~1為各軸的旋轉矢量值。rotate3d,rotateX,rotateY,rotateZ的效果在上面都有展示,不贅述。
 
matrix3d矩陣
 
最后matrix3d矩陣是所有3D變形的本質,上面所有3D變形效果都可以用matrix3d矩陣來實現。本篇先略過,將它和上面的2D矩陣matrix留到下一篇再介紹。
 
層級影響
 
現在來看看變形對CSS層級的影響。說起層級,absolute絕對是層級間的高富帥,見一個睡一個,sorry,是見一個壓一個,sorry,是見一個覆蓋一個。
 
 
//左圖
<img style="position:absolute;" src="bg100.png">
<img src="head75.png">
//右圖
<img style="position:absolute;" src="bg100.png">
<img style="transform:scale(1);" src="head75.png">
左圖因為第一張img具有absolute,完全無視DOM結構中的順序,妥妥地覆蓋了第二張img。右圖給第二張img設了transform,通常我們會認為scale(1)是廢代碼,但實際從右圖已經看出,由于設立transform,使元素具有了相當于absolute的層級,因此兩張img平級了,根據DOM中的順序,后者覆蓋了前者。
 
(這里使用的是scale,你可以改成rotate,skew等,效果都一樣。即層級和transform有關,但和具體哪個transform函數無關)
 
因為absolute和transform平級,你可以調整上面兩張img的順序,這樣設了transform的圖片會被absolute覆蓋。如果你非要讓absolute高人一等,可以設z-index:1這樣層級會高于transform,達到覆蓋效果。
 
和absolute同系列的relative和fixed也適用上述層級關系。如果你頁面上有個fixed廣告標簽,頁面滾動時被transform元素覆蓋了,請不要驚訝,試試設一下z-index。
 
總結
 
transform變形的用法介紹到這就差不多了。為縮減篇幅,文中代碼都省略-ms,-o等前綴,需要瀏覽器全適應的請自行加上。下一篇matrix/matrix3d會更深入其本質,看看這些變形函數究竟是如何變換坐標位置,顯示出各種效果的。
//www.irpoe.com.cn
【返回上一頁】
友情鏈接:卓越凱欣 盱眙蔣師傅龍蝦 盱眙龍蝦烹飪培訓
關鍵詞:190即时指数足球手机版 190即时指数足球手机版 190即时指数足球手机版 190即时指数足球手机版 190即时指数足球手机版
版權所有:淮安卓越凱欣科技有限公司  全國服務熱線:0517-83999928  地址:淮安市承德南路266號淮安軟件園   網站備案號:蘇ICP備08005522號
{ganrao} 贵州快三网 浙江20选5几点开奖 网球比分网即时比分 俄罗斯vs韩国比分推荐 微乐广西麻将作弊视频 20选5什么玩法中奖率高 宝博棋牌最新版本下载 天津麻将规则图解 加拿大28开奖查询官网 新疆11选5开奖一定牛 2元彩票新疆35选7 北京11选5一 明日竞彩足球预测推荐 河北麻将的玩法和规则 香港正版资料免费大全 516棋牌游戏大厅