web前端入门到实战：CSS 3D动画（魔方效果，多重立体图，圆柱效果，齿轮效果）

本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

属性

perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

perspective-origin: 设置透视点的位置

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

一、写一个简单的立方体

1.一个长方体有6个面，我们写6个div，并用一个父元素包裹起来。

    
1
    
2
    
3
    
4
    
5
    
6

学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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动画可以实现很多效果

下面是我写的一些3D动画效果

demo01

html

学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）


            


                

                    
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

学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

多重立体图

demo03

html

学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）


            

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

css

圆柱效果

demo04

html

学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）


            

                

                

                

            

            

                

                

                

            

            

                

                

                

                

                

                

            

        

css

齿轮效果

希望本文对大家有所帮助，学习前端更重要的还是理解原理，希望大家也有更多的创新，加油。