成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3D動畫

Bamboy / 1589人閱讀

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

css3D動畫 前言

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

寫一個簡單的立方體

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

    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    •
2、先給.parent設(shè)置寬高，并且給他設(shè)置視距和基點位置。 
.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全部絕對定位 
        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、先寫一個面，給他的背景設(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、我們寫好了第一個面，然后我們在將其他6個面調(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+動畫的效果 demo01

代碼如下：




    
    
    
    書頁2

效果如下圖：

demo02

代碼如下：




    
    
    
    立方體

    



    

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

效果如下圖：

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52863.html

相關(guān)文章

  • css3D動畫

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

    Cobub 評論0 收藏0

  • css3D動畫

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

    LittleLiByte 評論0 收藏0

  • 值得看看，2019 年 11 個受歡迎的 JavaScript 動畫庫！

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

    浠ラ箍 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<