摘要：前言本篇文章給大家?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-origin: 設(shè)置透視點(diǎn)的位置

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

1.一個(gè)長(zhǎng)方體有6個(gè)面，我們寫6個(gè)div，并用一個(gè)父元素包裹起來(lái)。

    
1
    
2
    
3
    
4
    
5
    
6

2.給.mofang設(shè)置寬高，并給他設(shè)置視距和透視點(diǎn)位置，preserve-3d屬性保留子元素3d轉(zhuǎn)換

.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.子元素全部絕對(duì)定位

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

4.開(kāi)始調(diào)整6個(gè)子元素的位置

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

效果圖如下：

5.一個(gè)面寫好之后，將其余的面都調(diào)整好

/*后*/
.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動(dòng)畫可以實(shí)現(xiàn)很多效果

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

齒輪效果

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

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

vx:bsl521921