CSS3 实现3D特效

最新推荐文章于 2025-06-09 09:42:03 发布

Richard_Jason

最新推荐文章于 2025-06-09 09:42:03 发布

阅读量926

点赞数 1

文章标签： css3 动画 3d 3D特效

本文详细介绍了CSS3中的过渡transition与动画animate属性，并通过实例展示了如何利用这些属性实现平滑过渡效果及复杂的动画效果。同时，文章还探讨了CSS3中的3D变换技术，包括如何创建简单的3D场景，以及如何运用3D变换制作交互式的翻页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 中的动画效果

transition
animate

transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，实现更加复杂的动画效果；

transion:过渡属性名称过渡时间

谷歌、opera、火狐、苹果浏览器不支持，注意兼容性

-webkit-transition: color 1s;

实例：我们在让背景颜色做一个改变

   <style>
       #block{
           width:400px;
           height:400px;
           background-color: blue;
           margin:0 auto;
       }
       #block:hover{
           background-color: red;
       }
   </style>
</head>
<body>
    <div id="block">
    </div>
</body>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

鼠标悬停上去之后，块状元素的背景颜色立即由蓝色变成红色，如果要实现平滑过渡，只需要在#block上添加一个过去属性-webkit-transition: background-color 3s;，如何添加在#block:hover上，那么就会hover的时候有3s的过渡，失去焦点后，立马变成blue，没有过渡效果；

上面其实是两个属性写在一起，分开写是这样的：;

   transition-property：color
   transition-duration:1s;
 1
2
 1
2

那么如何设置多个属性的过渡效果呢？

   <style>
       #block{
           width:400px;
           height:400px;
           background-color: blue;
           margin:0 auto;
           -webkit-transition: background-color 3s linear , height 2s linear;
       }
       #block:hover{
           background-color: red;
           height:600px;
       }
   </style>
</head>
<body>
    <div id="block">
    </div>
</body>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

translateX是从屏幕左边到右边；translateY是从上边到下边；translateZ是从屏幕外到里边；外为负数，越大，里为正数，表示越远；rotateX和rotateY都是分别沿着x轴中心与y轴中心逆时针为正，rotateZ是沿着顺时针为正；

使用CSS3创建简单的3d场景

这里写图片描述

   perspective: 500px;//3D物体距屏幕的距离

   perspective-origin: 10% 10%;//3D元素基点基于X,Y轴的位置

   transform:rotate(45deg);//2D/3D转换，旋转，缩放，移动或倾斜
 1
2
3
4
5
 1
2
3
4
5

简单的3d场景设置

<style>
        #experiment{
            -webkit-perspective: 800; //视距深度
            -webkit-perspective-origin: 50% 50%; //视距中心
            -webkit-transform-style:-webkit-preserve-3d;//3d场景
        }
        #block{
            width:500px;
            height:500px;
            background-color: #69c;
            margin:100px auto;

            -webkit-transform:rotateZ(45deg);
        }
    </style>
</head>
<body>
    <div id="experiment">
        <div id="block">
        </div>
    </div>
</body>


![](http://i.imgur.com/ZFi5nP0.gif)

### 综合实例：

   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>3d场景演示</title>
    <style>
        #space3d{
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;

            overflow:hidden;
        }
        #container{
            height: 400px;
            width: 400px;

            position: relative;
            margin: 0px auto;
            -webkit-transform-style:preserve-3d;
        }

        .page{
            height: 360px;
            width:360px;
            padding: 20px;

            position: absolute;

            background-color: #000;

            color: #FFF;
            font-weight: bold;
            font-size: 360px;
            text-align: center;/* 垂直居中 */
            line-height: 360px;/* 水平居中 */

            -webkit-transform-origin:bottom;
            -webkit-transition: -webkit-transform 1s linear;
        }

        #page2,#page3,#page4,#page5,#page6{
            -webkit-transform: rotateX(90deg);
        }

        #btnoption{
            margin: 40px auto;
            text-align: center;/* ... */
        }
    </style>
</head>
<body>
    <div id="space3d">
        <div id="container">
            <div class="page" id = "page1">1</div>
            <div class="page" id = "page2">2</div>
            <div class="page" id = "page3">3</div>
            <div class="page" id = "page4">4</div>
            <div class="page" id = "page5">5</div>
            <div class="page" id = "page6">6</div>
        </div>

    </div>

    <div id="btnoption">
        <button id="next" value="next" onclick="next()">next</button>
        <button id="prev" value="previous" onclick="prev()">prev</button>
    </div>

    <script>
        var currentIndex = 1;
        function next(){
            if(currentIndex == 6){
                return;
            }
            var currntPage = document.getElementById('page' + currentIndex);
            currntPage.style.webkitTransform = "rotateX(-90deg)";
            var nextPage = document.getElementById('page' + ++ currentIndex);
            nextPage.style.webkitTransform = 'rotateX(0deg)';
        }

        function prev(){
            if(currentIndex == 1){
                return;
            }
            var currntPage = document.getElementById('page' + currentIndex);
            currntPage.style.webkitTransform = "rotateX(90deg)";
            var prevPage = document.getElementById('page' + -- currentIndex);
            prevPage.style.webkitTransform = 'rotateX(0deg)';
        }
    </script>
</body>
 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118