亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

簡(jiǎn)單說(shuō) 用CSS做一個(gè)魔方旋轉(zhuǎn)的效果

sevi_stuo / 1045人閱讀

摘要：說(shuō)明魔方大家應(yīng)該是不會(huì)陌生的，這次我們來(lái)一起用實(shí)現(xiàn)一個(gè)魔方旋轉(zhuǎn)的特效，先來(lái)看看效果圖解釋我們要做這樣的效果，重點(diǎn)在于怎么把張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點(diǎn)在于用好的，這是非常重要的，好的，我們先拼出一個(gè)魔方的樣子。

說(shuō)明

魔方大家應(yīng)該是不會(huì)陌生的，這次我們來(lái)一起用CSS實(shí)現(xiàn)一個(gè)魔方旋轉(zhuǎn)的特效，先來(lái)看看效果圖！

解釋

我們要做這樣的效果，重點(diǎn)在于怎么把6張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點(diǎn)在于用好CSS的transform，這是非常重要的，好的，我們先拼出一個(gè)魔方的樣子。
效果圖

代碼（代碼比較長(zhǎng)，朋友們可以直接粘貼復(fù)制到電腦看效果）

我們來(lái)分析一下上面的代碼
先說(shuō)結(jié)構(gòu)部分，看圖

我們繼續(xù)說(shuō)CSS部分，主要是下面這4部分，我們說(shuō)說(shuō)每個(gè)部分中比較重要的
1、最外層容器樣式
position: relative; ，主要是因?yàn)楹竺鏁?huì)用到position: absolute;

absolute，生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

2、包裹所有容器樣式
transform-style: preserve-3d;
使被轉(zhuǎn)換的子元素保留其 3D 轉(zhuǎn)換：
參考鏈接 http://www.runoob.com/cssref/...

3、定義所有圖片樣式
position: absolute;
讓每個(gè)面先在同一個(gè)位置，方便后面轉(zhuǎn)換位置
效果圖 

Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix。

上下兩個(gè)面 沿X軸旋轉(zhuǎn)一定角度，沿Z軸位移一定像素。
前后左右四個(gè)面 沿Y軸旋轉(zhuǎn)一定角度，沿Z軸位移一定像素。
注意，后面是 先位移，再旋轉(zhuǎn)，其他面是先旋轉(zhuǎn)，再位移，千萬(wàn)別弄錯(cuò)順序。

4、鼠標(biāo)移入后樣式
只是改變translateZ的值，將位移的距離再增加100px

到此，我們就弄出一個(gè)魔方了，至于最開(kāi)始我們看到的魔方中還有嵌套一個(gè)小魔方，就很容易了，把這個(gè)魔方的六個(gè)面復(fù)制一下，然后粘貼到cube中，然后改變大小，和位移的距離就可以了，要讓整個(gè)魔方動(dòng)起來(lái) ，就在最外面的容器（cube）上，加上動(dòng)畫就可以了。

總結(jié)

做這樣的一個(gè)效果，主要是為了練習(xí)，transform，這個(gè)效果重點(diǎn)就是搞明白每個(gè)面要旋轉(zhuǎn)多少度，然后位移的距離是一樣的（不是說(shuō)取值是一樣的），明白了之后，做這個(gè)效果就很簡(jiǎn)單了，下方有完整的代碼！需要的朋友就CV吧！

完整示例代碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89477.html

相關(guān)文章

  • 簡(jiǎn)單說(shuō) 用CSS做一個(gè)魔方旋轉(zhuǎn)的效果

    摘要：說(shuō)明魔方大家應(yīng)該是不會(huì)陌生的，這次我們來(lái)一起用實(shí)現(xiàn)一個(gè)魔方旋轉(zhuǎn)的特效，先來(lái)看看效果圖解釋我們要做這樣的效果，重點(diǎn)在于怎么把張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點(diǎn)在于用好的，這是非常重要的，好的，我們先拼出一個(gè)魔方的樣子。 說(shuō)明 魔方大家應(yīng)該是不會(huì)陌生的，這次我們來(lái)一起用CSS實(shí)現(xiàn)一個(gè)魔方旋轉(zhuǎn)的特效，先來(lái)看看效果圖！ showImg(https://segment...

    livem 評(píng)論0 收藏0

  • 簡(jiǎn)單說(shuō) 用CSS做一個(gè)魔方旋轉(zhuǎn)的效果

    摘要：說(shuō)明魔方大家應(yīng)該是不會(huì)陌生的，這次我們來(lái)一起用實(shí)現(xiàn)一個(gè)魔方旋轉(zhuǎn)的特效，先來(lái)看看效果圖解釋我們要做這樣的效果，重點(diǎn)在于怎么把張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點(diǎn)在于用好的，這是非常重要的，好的，我們先拼出一個(gè)魔方的樣子。 說(shuō)明 魔方大家應(yīng)該是不會(huì)陌生的，這次我們來(lái)一起用CSS實(shí)現(xiàn)一個(gè)魔方旋轉(zhuǎn)的特效，先來(lái)看看效果圖！ showImg(https://segment...

    Lsnsh 評(píng)論0 收藏0

  • CSS動(dòng)畫之旋轉(zhuǎn)魔方輪播

    摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。寫完這篇文章后確實(shí)感覺(jué)自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處 很久沒(méi)有回頭來(lái)復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^(guò)...

    leone 評(píng)論0 收藏0

  • CSS動(dòng)畫之旋轉(zhuǎn)魔方輪播

    摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。寫完這篇文章后確實(shí)感覺(jué)自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處 很久沒(méi)有回頭來(lái)復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^(guò)...

    LittleLiByte 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<