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

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

属性

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

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

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

一、写一个简单的立方体

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

<div class="mofang">
    <div class="box mian1">1</div>
    <div class="box mian2">2</div>
    <div class="box mian3">3</div>
    <div class="box mian4">4</div>
    <div class="box mian5">5</div>
    <div class="box mian6">6</div>
</div>

1
2
3
4
5
6
7
8
9

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;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
1
2
3
4
5
6
7
8
9
10
11
12
13

注：视距越小图形越大，反之越小

3.子元素全部绝对定位

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

1
2
3
4
5
6
7
8
9
10
11

4.开始调整6个子元素的位置

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

1
2
3
4
5

效果图如下：

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);
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果图如下：

css3D动画可以实现很多效果

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

demo01

html

<div class="wutai">

            <div class="mofang">

                <div class="box mian1">
                    <div class="box1">1</div>
                    <div class="box1">2</div>
                    <div class="box1">3</div>
                    <div class="box1">4</div>
                    <div class="box1">5</div>
                    <div class="box1">6</div>
                    <div class="box1">7</div>
                    <div class="box1">8</div>
                    <div class="box1">9</div>
                </div>

                <div class="box mian2">
                    <div class="box2">1</div>
                    <div class="box2">2</div>
                    <div class="box2">3</div>
                    <div class="box2">4</div>
                    <div class="box2">5</div>
                    <div class="box2">6</div>
                    <div class="box2">7</div>
                    <div class="box2">8</div>
                    <div class="box2">9</div>
                </div>

                <div class="box mian3">
                    <div class="box3">1</div>
                    <div class="box3">2</div>
                    <div class="box3">3</div>
                    <div class="box3">4</div>
          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33