摘要：前言本篇文章給大家?guī)淼膬热菔顷P于實現動畫特效的代碼實例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

前言

本篇文章給大家?guī)淼膬热菔顷P于css實現3d動畫特效的代碼實例，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

屬性

perspective ：透距離，單位像素（值越小，透視距離越近，效果越明顯）：設置父元素上

perspective-origin: 設置透視點的位置

transform-style :指定某元素的子元素是位于三維空間內，取值：flat | preserve-3d

1.一個長方體有6個面，我們寫6個div，并用一個父元素包裹起來。

    
1
    
2
    
3
    
4
    
5
    
6

2.給.mofang設置寬高，并給他設置視距和透視點位置，preserve-3d屬性保留子元素3d轉換

.mofang{
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

    perspective: 3000px;
    perspective-origin:-100% -150%;
    transform-style: preserve-3d;
}

注：視距越小圖形越大，反之越小

3.子元素全部絕對定位

.box{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid black;
    position: absolute;            
}

4.開始調整6個子元素的位置

.mian1{
     background:  rgba(255, 255, 0, 0.3);
    transform:  translateY(50px) rotateX(90deg);
}

效果圖如下：

5.一個面寫好之后，將其余的面都調整好

/*后*/
.mian1{
    transform: translateZ(-50px);
}
/*上*/
.mian2{
    transform: translateY(-50px) rotateX(90deg);
}
/*左*/
.mian3{
    transform: translateX(-50px) rotateY(90deg);
}
/*前*/
.mian4{
    transform: translateZ(50px);
}
/*右*/
.mian5{
    transform: translateX(50px) rotateY(90deg);
}
/*下*/
.mian6{
    transform: translateY(50px) rotateX(90deg);
}

效果圖如下：

css3D動畫可以實現很多效果

demo01

html

            
            

                
                

                    
1
                    
2
                    
3
                    
4
                    
5
                    
6
                    
7
                    
8
                    
9
                
                
                

                    
1
                    
2
                    
3
                    
4
                    
5
                    
6
                    
7
                    
8
                    
9
                
                
                

                    
1
                    
2
                    
3
                    
4
                    
5
                    
6
                    
7
                    
8
                    
9
                
                
                

                    
1
                    
2
                    
3
                    
4
                    
5
                    
6
                    
7
                    
8
                    
9
                
                
                

                    
1
                    
2
                    
3
                    
4
                    
5
                    
6
                    
7
                    
8
                    
9
                
                
                

                    
1
                    
2
                    
3
                    
4
                    
5
                    
6
                    
7
                    
8
                    
9
                
                
                
            

css

魔方效果

demo02

html

            

                
1
                
2
                
3
                
4
                
5
                
6
                
                

                    
7
                    
8
                    
9
                    
10
                    
11
                    
12
                
            
        

css

多重立體圖

demo03

html

        
            

                
1
                
2
                
3
                
4
                
5
                
6
                
7
                
8
                
9
                
10
                
11
                
12
            
        

css

圓柱效果

demo04

html

css

齒輪效果

如果文中有不妥或者錯誤的地方還望高手的您指出，以免誤人子弟。

如果您有更好的建議，不如留言一起討論，共同進步！ 再次感謝您耐心的讀完本篇文章。

vx:bsl521921