標籤:興趣 slide 製作 nbsp rdp hidden 變形 firefox 不同
主要是看了這位大佬的文章,http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/,有的很大的收穫,在上一個製作3D變形案例中明白了一些原理。
首先一個立體座標系:
按照我的理解:
1.認識的突破口:rotateX, rotateY, rotateZ
3D transform中有下面這三個方法:
rotateX( angle )
rotateY( angle )
rotateZ( angle )
每個軸就是一個可轉動的軸承一樣,
rotateX(90deg),轉動X軸,向上(正方向)反轉90度。
一個大佬形象的比喻就是:
鄒凱的體操單杠運動是rotateX
;
蔡依林姐姐的鋼管舞是rotateY
;
旋轉飛刀的特技表演是rotateZ
。
於是:
2.perspective屬性
perspective
的中文意思是:透視,視角!
perspective
屬性的存在與否決定了你所看到的是2次元的還是3次元的,也就是是2D transform還是3D transform. 這不難理解,沒有透視,不成3D.
我們初中學美術,或者學建築的同學肯定接觸過透視的一些東西:
不過,CSS3 3D transform中的透視的透視點與上面兩張樣本圖是不同的:CSS3 3D transform的透視點是在瀏覽器的前方!
或者這麼理解吧:顯示器中3D效果元素的透視點在顯示器的上方(不是後面),近似就是我們眼睛所在方位!
比方說,一個1680像素寬的顯示器中有張美女圖片,應用了3D transform,同時,該元素或該元素父輩元素設定的perspective
大小為2000像素。則這張美女多呈現的3D效果就跟你本人在1.2個顯示器寬度的地方(1680*1.2≈2000)看到的真實效果一致!!
很好的講法,用視角的距離增加3D效果。
3.translateZ幫你尋找透視位置
translateZ可以更明顯看到3D效果,裡面的參數大小對應遠小近大的原理,參數越大,元素旋轉後就變大,離你更“近”。
大佬的講解是這樣:
如果說rotateX
/rotateY
/rotateZ
可以協助理解三維座標,則translateZ
則可以幫你理解透視位置。
我們都知道近大遠小的道理,對於沒有rotateX
以及rotateY
的元素,translateZ
的功能就是讓元素在自己的眼前或近或遠。比方說,我們設定元素perspective
為201像素,如下:
perspective: 201px;
則其子項目,設定的translateZ
值越小,則子項目大小越小(因為元素遠去,我們眼睛看到的就會變小);translateZ
值越大,該元素也會越來越大,當translateZ
值非常接近201像素,但是不超過201像素的時候(如200像素),該元素的大小就會撐滿整個螢幕(如果父輩元素沒有類似overflow:hidden的限制的話)。因為這個時候,子項目正好移到了你的眼睛前面,所謂“一葉蔽目,不見泰山”,就是這麼回事。當translateZ
值再變大,超過201像素的時候,該元素看不見了——這很好理解:我們是看不見眼睛後面的東西的!
4.perspective視角盲區
這個就是你視線與一個旋轉的Y軸上的物體平行時,物體就消失不見。
鑫空間裡面還講到了perspective的兩種寫法,如果舞台元素只有一個,最終呈現的視覺效果是一樣的
(近大遠小)
這是因為這時候的視角是以舞台元素的每一個形體為透視元素,當舞台上有多個形體,就想你的面前一下子有很多半開著的門(Y軸旋轉45度),你的視線到達這些門的角度和距離都是不同的,所以效果也就不一樣了。
5.其他
其他我就不寫我自己的理解了,直接複製大佬的講解(有點死宅的味道=-=):
理解perspective-origin
perspective-origin
這個屬性超級好理解,表示你那雙色迷迷的眼睛看的位置。預設就是所看舞台或元素的中心。有時候,我們對中心的位置是不感興趣的,希望視線放在其他一些地方。比方說:
一圖勝千言,屌絲男們這個應該都懂的。
下面為立方體的實際應用透視:
perspective-origin: 25% 75%;
transform-style: preserve-3d
transform-style
屬性也是3D效果中經常使用的,其兩個參數,flat|preserve-3d
. 前者flat
為預設值,表示平面的;後者preserve-3d
表示3D透視。
preserve-3d
符合我們真實世界的思維認識。比方說,你讓妹子右轉了45度,此時妹子腦袋左轉45度想你吐舌賣萌,妹子的臉蛋應該和你是面對面平行的。
應用transform-style: preserve-3d
聲明的元素確實是這樣表現的,但是,如果使用預設的flat
值,其效果表現——恕我想象力有限——想不通:妹子的臉還是左轉45度的,同時腦袋似乎移到了身體以外的地方!
因此,基本上,我們想要根據現實經驗實現一些3D效果的時候,transform-style: preserve-3d
是少不了的。一般而言,該聲明應用在3D變換的兄弟元素們的父元素上,也就是舞台元素。
backface-visibility
在顯示世界中,我們無法穿過軟妹A看到其身後的軟妹B或C或D;但是,在CSS3的3D世界中,預設情況下,我們是可以看到背後的元素(也不知可不可以透視妹子的衣服~)!
因此,為了切合實際,我們常常會這樣設定,使後面元素不可見:
backface-visibility:hidden;
實際應用-圖片的旋轉木馬效果
您可以狠狠地點擊這裡:圖片的旋轉木馬效果demo
建議在足夠新版本的FireFox瀏覽器或Safari瀏覽器下觀看,Chrome可能需要置中定位查看,為效果縮圖:
原理:
那些看上去很酷酷的CSS3 3D效果其實就顛來倒去那幾個屬性(本文提到的這幾個),折騰來折騰去,這裡這個效果顯然也是如此。
首先HTML結構,如下:
舞台 容器 圖片 圖片 圖片 ...
對於舞台,很簡單,加個視距,比方說800像素:
perspective: 800px;
對於容器,很簡單,加個3D視圖聲明,如下:
transform-style: preserve-3d;
然後就是圖片們了。為了不至於產生類似DNA的螺旋狀效果,我們讓所有圖片position:absolute
,公用同一個中心點。
顯然,圖片旋轉木馬是類似鋼管舞旋轉的運動,因此,我們關心的是rotateY
的大小。
因為要正好繞成一個圈,因此,圖片rotateY
值正好0~360等分,於是,如果有9張圖片,則每個圖片的旋轉角度累加40(360 / 9 = 40)度即可。因此有:
img:nth-child(1) { transform: rotateY( 0deg ); }img:nth-child(2) { transform: rotateY( 40deg ); }img:nth-child(3) { transform: rotateY( 80deg ); }img:nth-child(4) { transform: rotateY( 120deg ); }img:nth-child(5) { transform: rotateY( 160deg ); }img:nth-child(6) { transform: rotateY( 200deg ); }img:nth-child(7) { transform: rotateY( 240deg ); }img:nth-child(8) { transform: rotateY( 280deg ); }img:nth-child(9) { transform: rotateY( 320deg ); }
這樣就好了嗎?
No, No, No!!!
想想看那,雖然9個絕色美女每個人的方位不一樣,但都站在同一個點上,早就擠作一團,A罩都擠成C了,顯然是不行的(見只設定rotateY)!我們需要拉開空間~~
如何拉開空間,很簡單。
想想看那:9個美女,分別面朝東南西北共9個不同方位,她們只要每個人向前走個4~5步,美女們之間的空間不久拉開了,呈現圓形了!想象一下夜空中,禮花綻開的情境~~
這裡的向前走4~5步,聰明的人應該已經知道了,就是本文提到的translateZ
, 當translateZ
為正值的時候,元素會向其面對的方向走去;如果元素無旋轉,就會朝顯示器走來!!
現在只剩下一個問題了,美女們要向前走多遠呢??
這個距離是有計算公式滴!
拿本demo距離,每張美女圖片的寬度是128像素,因此,有如下理想方位:
中紅色標註的r
就是的demo頁面中圖片要translateZ
的理想值(該值可以讓所有圖片無縫圍成一個圓)!
r
的計算很簡單,有初中數學水平的人應該都會:
r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8
demo頁面為了好看,圖片之間留了點間距,使用的translateZ
的值為175.8 + 20 = 195.8
.
最後的最後,要讓木馬旋轉起來,只要讓容器每次旋轉40度就可以了。
節省篇幅,具體的JavaScript作業碼就不展示了,您有興趣可以查看demo頁面原始碼。
CSS3 3D transform變換