国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css3D動(dòng)畫

Bamboy / 1577人閱讀

摘要：動(dòng)畫前言最近玩了玩用來(lái)構(gòu)建效果，寫了幾個(gè)，所以博客總結(jié)一下。寫一個(gè)簡(jiǎn)單的立方體我們先用實(shí)現(xiàn)一個(gè)長(zhǎng)方體，一個(gè)長(zhǎng)方體有個(gè)邊，我們寫個(gè)，并用一個(gè)包裹起來(lái)根據(jù)我寫動(dòng)畫的經(jīng)驗(yàn)，最好有一個(gè)父元素來(lái)包裹先給設(shè)置寬高，并且給他設(shè)置視距和基點(diǎn)位置。

css3D動(dòng)畫 前言

最近玩了玩用css來(lái)構(gòu)建3D效果，寫了幾個(gè)demo，所以博客總結(jié)一下。 在閱讀這篇博客之前，請(qǐng)先自行了解一下css 3D的屬性，例如：transform-style，transform-origin，transform, perspective。

寫一個(gè)簡(jiǎn)單的立方體

1、我們先用css實(shí)現(xiàn)一個(gè)長(zhǎng)方體，一個(gè)長(zhǎng)方體有6個(gè)邊，我們寫6個(gè)li，并用一個(gè)ul包裹起來(lái),根據(jù)我寫3D動(dòng)畫的經(jīng)驗(yàn)，最好有一個(gè)父元素來(lái)包裹 

    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    •
2、先給.parent設(shè)置寬高，并且給他設(shè)置視距和基點(diǎn)位置。 
.parent{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
            perspective: 2000px;
            perspective-origin: -40% -80%;
            background: #000;
        }
3、給ul設(shè)置寬高以及preserve-3d屬性保留子元素3d轉(zhuǎn)換，子元素li全部絕對(duì)定位 
        ul{
            width: 50px;
            position: relative;
            margin: 100px auto;
            transform-style : preserve-3d;
        }
         li{
            width: 100px;
            height: 100px;
            background:  rgba(255, 255, 0, 0.3);
            position: absolute;
            text-align: center;           
            border: 3px solid greenyellow;
        }

效果如下圖所示：

4、先寫一個(gè)面，給他的背景設(shè)置 background: rgba(255, 255, 0, 0.3); 
 li:nth-child(1){
            background:  rgba(255, 255, 0, 0.3);
            transform:  translateY(50px) rotateX(90deg);
        }

效果如下圖所示：

5、我們寫好了第一個(gè)面，然后我們?cè)趯⑵渌?個(gè)面調(diào)整好，變成下圖所示。關(guān)于rotate的旋轉(zhuǎn)方向這里不解釋，不懂的朋友可以自行查看其他文檔。 
        /*上面*/
         li:nth-child(1){
            transform: translateY(-50px) rotateX(90deg);
        } 
        /*下面*/
        li:nth-child(2){
        
            transform:  translateY(50px) rotateX(90deg);
        }
        /*左面*/
        li:nth-child(3){
            transform: translateX(-50px) rotateY(90deg);
        }
        /*右面*/
        li:nth-child(4){
            transform: translateX(50px) rotateY(90deg);
        }
        /*前面*/
        li:nth-child(5){
            transform: translateZ(50px);
        }
        /*后面*/
        li:nth-child(6){
            transform: translateZ(-50px);
        }

效果如下圖所示：

下面是一些我寫的css3D+動(dòng)畫的效果 demo01

代碼如下：




    
    
    
    書頁(yè)2

效果如下圖：

demo02

代碼如下：




    
    
    
    立方體

    



    

        
        
            
  • 
            
  • 
            
  • 
            
  • 
            
  • 
            
  • 
            
  • 
            
  • 
            
  • 
            
  • 
            
  • 
            
  •

效果如下圖：

持續(xù)更新，歡迎大家指教！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52863.html

相關(guān)文章

  • css3D動(dòng)畫

    摘要：動(dòng)畫前言最近玩了玩用來(lái)構(gòu)建效果，寫了幾個(gè)，所以博客總結(jié)一下。寫一個(gè)簡(jiǎn)單的立方體我們先用實(shí)現(xiàn)一個(gè)長(zhǎng)方體，一個(gè)長(zhǎng)方體有個(gè)邊，我們寫個(gè)，并用一個(gè)包裹起來(lái)根據(jù)我寫動(dòng)畫的經(jīng)驗(yàn)，最好有一個(gè)父元素來(lái)包裹先給設(shè)置寬高，并且給他設(shè)置視距和基點(diǎn)位置。 css3D動(dòng)畫 前言 最近玩了玩用css來(lái)構(gòu)建3D效果，寫了幾個(gè)demo，所以博客總結(jié)一下。 在閱讀這篇博客之前，請(qǐng)先自行了解一下css 3D的屬性，例如...

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

  • css3D動(dòng)畫

    摘要：前言本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于實(shí)現(xiàn)動(dòng)畫特效的代碼實(shí)例，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。 前言 本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于css實(shí)現(xiàn)3d動(dòng)畫特效的代碼實(shí)例，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。 屬性 perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設(shè)置父元素上 perspective-orig...

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

  • 值得看看，2019 年 11 個(gè)受歡迎的 JavaScript 動(dòng)畫庫(kù)！

    摘要：超過(guò)的星星，是一個(gè)動(dòng)畫庫(kù)，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。超過(guò)星星，這個(gè)動(dòng)畫庫(kù)大小只有。超過(guò)星星，這個(gè)庫(kù)基允許你以選定的速度為字符串創(chuàng)建打字動(dòng)畫。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超過(guò)46K的星星，...

    浠ラ箍 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<