一本大道东京热无码av_国内精品久久精品_最新精品国产偷自在线_亚洲无码人妖视频在线播放

藍(lán)鷗旗下品牌:鷗課學(xué)院
全國(guó)咨詢(xún)電話(huà):13152008057
您的位置: 首頁(yè) > 最新資訊 > 【原創(chuàng)】CSS3 之 3D變形實(shí)現(xiàn)"魔方"

【原創(chuàng)】CSS3 之 3D變形實(shí)現(xiàn)"魔方"

2017-08-31 藍(lán)鷗
8362人 瀏覽:

  首先,我們來(lái)看一下今天我們使用3D變形要實(shí)現(xiàn)的兩種3D空間效果:

  第一種不帶特效處理的"魔方":

  如下圖所示:

1.gif

  接著我們看下稍做特效處理之后的一種效果:(此處因生成gif動(dòng)態(tài)圖,所以,效果看起來(lái)比網(wǎng)站投射出來(lái)的效果要差些,在桌面端運(yùn)行就不會(huì)有問(wèn)題了);

  如下圖所示:

2.gif

  有沒(méi)有覺(jué)得三維空間3D立體效果很炫呢?帶著疑問(wèn),我們一塊來(lái)看一下實(shí)現(xiàn)思路吧!

  首先,我們來(lái)學(xué)習(xí)幾個(gè)3D變形當(dāng)中的幾個(gè)屬性知識(shí)點(diǎn);學(xué)習(xí)3D效果之前,我們來(lái)看一張三維空間圖片,這是一張三維空間的基本圖,分別有x軸、y軸、z軸三個(gè)方向;

3.jpg

  3D平移 translate

  3D平移分別有三個(gè)方向:

  第一個(gè)方向:translateX(x) 定義 3D 轉(zhuǎn)化,僅使用用于 X 軸的值,以X軸平移;

  看下代碼中所示,例如我們創(chuàng)建了一個(gè)div標(biāo)簽(我們?cè)赿iv上添加一行字,叫做"我是文字",方便待會(huì)兒查看角度),然后設(shè)置其屬性為:

4.webp.jpg

5.webp.jpg

  然后,我們來(lái)看一下3D平移,該場(chǎng)景下的運(yùn)行效果(注意:主要看下鼠標(biāo)滑到div上時(shí)的一個(gè)平移效果);

6.gif

  第二個(gè)方向:translateX(Y) 定義 3D 轉(zhuǎn)化,僅使用用于 Y 軸的值,以Y軸平移;這個(gè)和以X軸方向差不多,也就是上下平移,如果平移的負(fù)值,則往Y軸的負(fù)方向,也就是往下平移,反之,向上平移(這個(gè)地方就不做圖解演示說(shuō)明);

  第三個(gè)方向:translateZ(z) 定義 3D 轉(zhuǎn)化,僅使用用于 Z 軸的值,以Z軸平移;對(duì)于這個(gè)角度的值,就得有三維空間的想象力了,那么,往Z周的正方向來(lái)平移,也就是相當(dāng)于與我們眼睛目視前方的距離越來(lái)越近;做個(gè)實(shí)例,我們來(lái)看一下;我們還是使用上面這個(gè)已經(jīng)創(chuàng)建好的div標(biāo)簽,稍作修改,看下效果;

  注意:在使用translateZ平移時(shí),一定要定義一個(gè)透視點(diǎn)作為參照物以及開(kāi)啟3D視圖;

7.jpg

  同樣,我們來(lái)看一下3D平移,該場(chǎng)景下的運(yùn)行效果(注意:主要看下鼠標(biāo)滑到div上時(shí)的一個(gè)距離我們?cè)絹?lái)越近的平移效果 Z軸正方向);

10.gif

  3D旋轉(zhuǎn) rotate

  rotateX(angle) 定義沿 X 軸的 3D 旋轉(zhuǎn)。

  同樣,我們還是以上面這個(gè)div為例,只需要將里面的transform部分修改為rotateX,沿X軸旋轉(zhuǎn);(只看修改代碼的部分)

  我們來(lái)看下沿X軸旋轉(zhuǎn)的效果;

13.gif

  rotateY(angle) 定義沿 Y 軸的 3D 旋轉(zhuǎn)。(這個(gè)只需要將上面代碼中的rotateX修改為rotateY即可,我們看下沿Y軸旋轉(zhuǎn)的效果);

14.gif

  rotateZ(angle) 定義沿 Z 軸的 3D 旋轉(zhuǎn)。(這個(gè)只需要將上面代碼中的rotateY修改為rotateZ即可,我們看下沿Z軸旋轉(zhuǎn)的效果)注意:Z軸的空間是哪個(gè)角度;

15.gif

  ok,學(xué)完了3D平移和3D旋轉(zhuǎn)屬性之后,我?guī)е蠹乙粔K實(shí)現(xiàn)一下"魔方";

  首先,我們需要?jiǎng)?chuàng)建6個(gè)div標(biāo)簽,代表魔方的六個(gè)面,記得在底部嵌套兩個(gè)div,便于待會(huì)兒做旋轉(zhuǎn)使用;

16.jpg

  然后,設(shè)置各個(gè)div的相關(guān)屬性,注意:因?yàn)橐褂玫酵鵝軸平移,所以,記得開(kāi)啟3D視圖;

  接著,設(shè)置"魔方"的幾個(gè)面自己的屬性,也就是各個(gè)面小div的屬性;先設(shè)置三個(gè)面看看效果;同時(shí)讓六個(gè)div上一個(gè)的div發(fā)生旋轉(zhuǎn)角度,便于我們觀(guān)看;

  效果如下圖所示:

22.jpg

  寫(xiě)到這兒,已經(jīng)有了立體空間的感覺(jué)了......我們接著把其余三個(gè)面也給補(bǔ)上,看看效果;

24.jpg

  效果如下圖所示:

25.jpg

  我們需要在"魔方"每個(gè)面div里嵌套一個(gè)img標(biāo)簽,用來(lái)顯示圖片即可,看下效果;

26.jpg

  接著,我們需要讓其最底部的div沿Y軸方向旋轉(zhuǎn),看看效果;

27.jpg

28.gif

  最后,我們添加截取div邊框圓角的屬性,以及設(shè)置陰影發(fā)光顏色,將大功告成了!

29.jpg

  最終效果如下:

30.gif

  1. 廣告1
  2. 廣告2
  3. 廣告3
  4. 廣告4