這篇文章給大家分享的是有關css3D+動畫的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯建站主要從事網站制作、成都網站制作、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務龍泉驛,十載網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

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

寫一個簡單的立方體

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

    

        
1
        
2
        
3
        
4
        
5
        
6
    

2、先給.parent設置寬高，并且給他設置視距和基點位置。

.parent{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
            perspective: 2000px;
            perspective-origin: -40% -80%;
            background: #000;
        }

3、給ul設置寬高以及preserve-3d屬性保留子元素3d轉換，子元素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、先寫一個面，給他的背景設置 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個面調整好，變成下圖所示。關于rotate的旋轉方向這里不解釋，不懂的朋友可以自行查看其他文檔。

        /*上面*/
         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+動畫的效果

1、代碼如下：

2、代碼如下：

效果如下圖：

感謝各位的閱讀！關于“css3D+動畫的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！