CSS3之2D與3D變換的實(shí)現(xiàn)方法
css3實(shí)現(xiàn)了對(duì)元素實(shí)行2D平面變換,以及視覺(jué)上的3D空間變換,2D變換平時(shí)可能用的較多,3D結(jié)果也能錦上添花;
關(guān)于坐標(biāo)軸
初中數(shù)學(xué)的幾何學(xué)里我們便開(kāi)始接觸坐標(biāo)軸,最基本的是平面直角坐標(biāo)系 XoY
,然后延長(zhǎng)出空間直角坐標(biāo)系 XYZ
,如今我們來(lái)說(shuō)一下css中的坐標(biāo)系;
css甚至一下設(shè)備相干的開(kāi)發(fā)中,基本都遵循如許一套坐標(biāo)系:以手機(jī)屏幕為例,坐標(biāo)系 圓點(diǎn) 位于屏幕最左上角; x軸 水平,向右為正方向; y軸 垂直,向下為正方向; z軸 垂直于整個(gè)屏幕平面,向外為正方向,就是屏幕光線射向你眼睛的方向;
如圖:
2D變換
包括平移 translate()
,旋轉(zhuǎn) rotate()
,縮放 scale()
,傾斜 skew()
,矩陣 matrix()
;
translate(x,y)
平移操作,包括 translateX(x)
, translateY(y)
,括號(hào)內(nèi)填平移參數(shù)值,可以是負(fù)值,即反方向;
例如:
div { /*元素向右平移50px,向下移60px*/ transform: translateX(50px); transform: translateY(60px); } /*簡(jiǎn)寫情勢(shì),結(jié)果雷同*/ div { transform: translate(50px, 60px); }
細(xì)致 translate()
只指定一個(gè)值則默認(rèn)是 x軸 位移,即水平移動(dòng);
rotate(deg)
元素旋轉(zhuǎn),括號(hào)中參數(shù)為旋轉(zhuǎn)角度, 順時(shí)針 為正值, 逆時(shí)針 為負(fù)值,單位為 deg
,即多少度;
例如:
div { /* 順時(shí)針旋轉(zhuǎn)30° */ transform: rotate(30deg); }
scale(x,y)
縮放元素,參數(shù)分別為x軸,y軸縮放倍數(shù),包括 scaleX(x)
和 scaleY(y)
,提供一個(gè)參數(shù)透露表現(xiàn) 按比例 縮放;
例如:
div { /* 橫向縮小一半,縱向放大一倍 */ transform: scale(.5, 2); }
div { /* 按比例放大3倍 */ transform: scale(3); }
skew(xdeg,ydeg)
包含 skewX(deg)
, skewY(deg)
,透露表現(xiàn)在水平和垂直方向傾斜的角度;
例如:
div { transform: skewX(30deg); transform: skewY(45deg); } /* 簡(jiǎn)寫 */ div { transform: skew(30deg, 45deg); }
必要 細(xì)致 ,假如元素為一個(gè)矩形,那么 skewX(30deg)
透露表現(xiàn)矩形 頂邊固定 ,底邊 向右 傾斜 30deg
; skewY(30deg)
透露表現(xiàn)矩形 左邊框固定 ,右邊框 向下 傾斜 30deg
;
可以根據(jù)上面講的屏幕坐標(biāo)系來(lái)記憶,x軸位于屏幕頂部,方向向右;y軸位于屏幕左部,方向向下;
假如 skew()
只指定一個(gè)值,默認(rèn)是 水平傾斜 ;
skewX(30deg)的結(jié)果:
skewY(30deg)的結(jié)果:
matrix(a,b,c,d,e)
這是一個(gè)綜合屬性,之前的平移,縮放,旋轉(zhuǎn),傾斜都能通過(guò)這個(gè)矩陣函數(shù)實(shí)現(xiàn),對(duì),大學(xué)里 線性代數(shù) 中的矩陣 T_T;
其實(shí)這個(gè)函數(shù)就是前面四種操作的 原理 ,函數(shù)共有六個(gè)參數(shù),四種操作都對(duì)應(yīng)不同的參數(shù)改變體例,像我們這種非數(shù)學(xué)專業(yè)的就不贅述原理了,前面的操作基本夠用了(想探求刺激就去百度“css matrix”吧)~~;
3D變換
所謂3D就是在前面2D平面上多了一個(gè) z軸 ,方法名也差不多,然后能以分別以三根軸位基準(zhǔn)進(jìn)行變換,實(shí)現(xiàn)立體結(jié)果;
看一下所有3D操作方法:
translate3d(x,y,z)
結(jié)合前面講的空間坐標(biāo)系和 x, y, z軸的位置,三個(gè)參數(shù)分別對(duì)應(yīng)元素在三個(gè)坐標(biāo)軸方向的平移值,也包含三個(gè)方法 translateX(x)
, translateY(y)
, translateZ(z)
;
舉例:
div { transform: translateX(50px); transform: translateY(60px); transform: translateZ(70px); } /* 簡(jiǎn)寫 */ div { transform: translate3d(50px, 60px, 70px); }
細(xì)致:關(guān)于設(shè)置 translateZ(z)
看不出結(jié)果的題目,后面說(shuō)到設(shè)置 persoective
時(shí)會(huì)詮釋;
rotate3d(x,y,z,deg)
參數(shù) x, y, z
為空間坐標(biāo)系的一個(gè)坐標(biāo)位置,然后由原點(diǎn) (0, 0, 0)
指向這個(gè)點(diǎn)形成一個(gè)有方向的新軸,數(shù)學(xué)中稱矢量,最后一個(gè)參數(shù)就是元素圍繞剛才所形成的新軸旋轉(zhuǎn)的度數(shù);
也包括 rotateX(deg)
, rotateY(deg)
, rotateZ(deg)
,之前2D的 rotate()
便是這里的 rotateZ()
;
至于旋轉(zhuǎn)的方向,判斷方法類似于物理中的 左手定則 :角度指定為正的話,左手拇指與四指垂直,拇指指向元素圍繞旋轉(zhuǎn)的坐標(biāo)軸或自定義軸,四指彎曲圍繞方向就是旋轉(zhuǎn)方向;
舉例:
div { transform: rotateX(30deg); transform: rotateY(30deg); transform: rotataZ(30deg); } /* 自定義軸旋轉(zhuǎn) */ div { transform: rotate3d(10, 10, 10, 30deg); }
rotateX(30deg)的結(jié)果:
rotateY(30deg)的結(jié)果:
關(guān)于為什么這里的旋轉(zhuǎn)不是想象中的結(jié)果,而是縮小,重要是沒(méi)有設(shè)置視點(diǎn),后面會(huì)講;
scale3d(x,y,z)
元素關(guān)于三個(gè)軸的縮放比例,包括 scaleX(x)
, scaleY(y)
, scaleZ(z)
,舉例:
div { transform: scaleX(2); transform: scaleY(2); transform: scaleZ(2); } /* 簡(jiǎn)寫 */ div { transform: scale3d(2, 2, 2); }
必要 細(xì)致 這里的 scaleZ()
,正常情況下,擴(kuò)大z軸會(huì)是物體 變厚 ,但是css里面呈現(xiàn)的平面元素并沒(méi)有 厚度 ,所以這里的縮放z軸其實(shí)是縮放元素在z軸的 坐標(biāo) ,所以要有用果必須要指定 translateZ()
的值;
舉例:
body { perspective: 500; } div { /* 必須這個(gè)順序,先縮放后平移,不然無(wú)結(jié)果 */ transform: scaleZ(2) translateZ(100px); }
按照上面樣式才能看到 scaleZ(2)
的結(jié)果,由于后面在z軸上移動(dòng)了 100px
,縮放比例為2,最終會(huì)移動(dòng) 200px
,屏幕上則體現(xiàn)為元素放大了一下,這是透視結(jié)果,就是那個(gè) perspective
值,下面會(huì)講到;
matrix3d()
和前面2D的 matrix()
相似,只不過(guò)這里括號(hào)里的參數(shù)有 16個(gè) ,矩陣更加復(fù)雜,跳過(guò)吧﹋o﹋,有愛(ài)好可以自行百度~~;
perspective
在上面的示例中,有關(guān)z軸的平移和縮放通常情況下是看不出結(jié)果的,正是缺少這項(xiàng)屬性值,叫做 透視 ,美術(shù)或設(shè)計(jì)中會(huì)出現(xiàn)這個(gè)詞匯,就是實(shí)現(xiàn)物體近大遠(yuǎn)小的結(jié)果,遠(yuǎn)小最終會(huì)小到一個(gè)點(diǎn),那就是 透視點(diǎn) , perspective
就是用來(lái)設(shè)置那個(gè)點(diǎn)距離元素有多遠(yuǎn),一樣平常300~600很表現(xiàn)很好的透視結(jié)果, 值越小元素透視變形越緊張 ;
必要 細(xì)致 的是,這項(xiàng)屬性設(shè)置在應(yīng)用透視結(jié)果元素的 父元素 的樣式中,才能看出結(jié)果,例如:
body { perspective: 500; /* 考慮欣賞器兼容 */ -webkit-perspective: 500; }
也可以設(shè)置在元素自己,格式為:
div { transform: perspective(500); -webkit-transform: perspective(500); }
rotateX(45deg)的更真實(shí)的結(jié)果:
rotateY(45deg)的結(jié)果:
perspective-origin
此項(xiàng)設(shè)置透視點(diǎn)的位置,默認(rèn)在元素幾何中間,必要設(shè)置的話,格式如下:
body { /* 默認(rèn)中間 */ perspective-origin: center center; /* 左上角 */ perspective-origin: left top; /* 右邊中間 */ perspective-origin: right center; /* 底部中間 */ perspective-origin: bottom center; /* 也可以是長(zhǎng)度 */ perspective-origin: 30px 40px; /*最后記得加 -webkit- 兼容 */ }
perspective-origin: left center的結(jié)果:
perspective-origin: right center的結(jié)果:
backface-visibility
翻譯過(guò)來(lái)叫背面是否可見(jiàn),可以設(shè)置 visible
和 hidden
,默認(rèn)可見(jiàn),比如元素正面有筆墨,設(shè)置背面可見(jiàn),則關(guān)于y軸旋轉(zhuǎn)180°后元素內(nèi)筆墨變成鏡像,否則不會(huì)出現(xiàn);
backface-visibility: visible的結(jié)果:
backface-visibility: hidden的結(jié)果(有旋轉(zhuǎn),只是背面不可見(jiàn),則看不見(jiàn)了):
其他屬性
transform-origin
設(shè)置2D/3D轉(zhuǎn)變的基準(zhǔn),可以是長(zhǎng)度值,也可以是 left, right, top, bottom
,例如:
div { /* 關(guān)于元素左上角旋轉(zhuǎn) */ transform-origin: left top; transform: rotate(30deg); }
transform-style
設(shè)置元素如何在3D空間呈現(xiàn)被嵌套的元素,選擇是 flat
和 preserve-3d
,默認(rèn) flat
;
這里這么來(lái)理解,之前我們對(duì)一個(gè)元素實(shí)行變換時(shí),都是以屏幕所在平面的坐標(biāo)系在變換,但是元素假如存在子元素的話, transform-style
就是用來(lái)確定在哪套坐標(biāo)系上進(jìn)行變換, flat
透露表現(xiàn)任然以屏幕坐標(biāo)系為基準(zhǔn), preserve-3d
透露表現(xiàn)以 變換后的父元素所在平面的坐標(biāo)系 為基準(zhǔn);
#parent { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: perspective(500) rotateY(45deg); -webkit-transform: perspective(500) rotateY(45deg); } #child { transform: perspective(500) rotateX(45deg); -webkit-transform: perspective(500) rotateX(45deg); }
flat的結(jié)果:
preserve-3d的結(jié)果:
例如,父元素繞x軸旋轉(zhuǎn)了45度,并且設(shè)置 transform-style: preserve-3d
,而嵌套的子元素只繞y軸旋轉(zhuǎn)45度,那么最終結(jié)果就是子元素繞父元素平面的y軸旋轉(zhuǎn)了45度,看起來(lái)就像先x軸轉(zhuǎn)45度后y軸轉(zhuǎn)45度的結(jié)果;
最后,別忘了為以上所有特征添加欣賞器兼容前綴;
以上就是本文的悉數(shù)內(nèi)容,盼望對(duì)大家的學(xué)習(xí)有所幫助,也盼望大家多多支持圖趣網(wǎng)。
本文地址:http://m.likemindfilms.com/tutorial/wd501.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏