CSS3 3D transform變換

來源:互聯網
上載者:User

標籤:興趣   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變換

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.