web前端开发个人技术博客
当前位置: 免费资源 > css3制作3D旋转导航特效

css3制作3D旋转导航特效

2018-09-08 分类:免费资源 作者:码云 阅读(25)

这篇文章我们将带着大家做一个3D旋转导航特效,在做之前,大家需要有一定的css3变形transform和过渡transition等知识内容的学习,如果有的同学还是对这一块的知识相对薄弱的话,建议大家先去提高一下这些知识,推荐阅读《css3变形与动画(上)》和《css3变形与动画(下)》这两篇文章,让大家快速掌握css3变形与动画知识。

先来卡一下我们要实现的效果:

css3制作3D旋转导航特效 上面的效果是不是很炫啊,这就是我们今天要实现的内容,具体任务要求如下:

1、通过CSS3的@font-face属性引入本地字体

2、调用自定义的字体

3、设置3D舞台布景

4、给3D舞台布景设置过渡动画效果

5、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果

6、给3D舞台中“.three-d-box”设置过渡与变形效果

7、给导航设置3D前,与3D后变形效果

8、设置导航当前状态与悬浮状态下的背景效果

9、显示下拉导航菜单,并其设置一个变形效果

先来看一下HTML代码:

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
<div id="nav">
    <ul class="nav-menu clearfix unstyled">
        <li>
            <a href="#" class="three-d active">
                Home
                <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
            </a>
        </li>
        <li>
            <a href="#" class="three-d">
                Services
                <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
            </a>
        </li>
        <li>
            <a href="#" class="three-d">
                Products
                <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
            </a>
        </li>
        <li>
            <a href="#" class="three-d">
                About
                <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
            </a>
        </li>
        <li>
            <a href="#" class="three-d">
                Contact
                <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
            </a>
        </li>
        <li>
            <a href="#" class="three-d">
                Blog
                <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
            </a>
            <ul class="clearfix unstyled drop-menu">
                <li>
                    <a href="#" class="three-d">
                        Html5
                        <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="three-d">
                        Css3
                        <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="three-d">
                        JavaScript
                        <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="three-d">
                        Videogames
                        <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="three-d">
                Shop On-line
                <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
            </a>
        </li>
    </ul>
</div>

css代码:

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
@import url("http://www.w3cplus.com/demo/css3/base.css");
/*任务一:引入本地字体文件*/

@font-face {
    font-family: 'sansationregular';
    src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
    src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'), url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'), url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'), url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #edecec;
}

ul,
li {
    list-style: none outside none;
}
/* basic menu styles */

.nav-menu {
    display: block;
    background: #74adaa;
    width: 951px;
    margin: 50px auto 150px;
}

.nav-menu&gt;li {
    display: inline;
    float: left;
    border-right: 1px solid #94c0be;
    position: relative;
}

.nav-menu&gt;li:last-child {
    border-right: none;
}

.nav-menu li a {
    color: #fff;
    display: block;
    text-decoration: none;
    /*调用本地字体*/
    font-family: 'sansationregular';
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-transform: capitalize;
    overflow: visible;
    line-height: 20px;
    font-size: 20px;
    padding: 15px 30px 15px 31px;
}
/* animation domination */

.three-d {
    /* 任务三、设置3D舞台布景 */
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
    /*任务四、设置3D舞台布景过渡效果*/
    -webkit-transition: all .07s linear;
    -moz-transition: all .07s linear;
    -ms-transition: all .07s linear;
    -o-transition: all .07s linear;
    transition: all .07s linear;
    position: relative;
}

.three-d:not(.active):hover {
    cursor: pointer;
}
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/

.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
    -wekbit-transform: translateZ(-25px) rotateX(90deg);
    -moz-transform: translateZ(-25px) rotateX(90deg);
    -o-transform: translateZ(-25px) rotateX(90deg);
    -ms-transform: translateZ(-25px) rotateX(90deg);
    transform: translateZ(-25px) rotateX(90deg);
}

.three-d-box {
    /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transform: translatez(-25px);
    -moz-transform: translatez(-25px);
    -ms-transform: translatez(-25px);
    -o-transform: translatez(-25px);
    transform: translatez(-25px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
/*任务七、给导航设置3D前,与3D后变形效果*/

.front {
    -webkit-transform: rotatex(0deg) translatez(25px);
    -moz-transform: rotatex(0deg) translatez(25px);
    -ms-transform: rotatex(0deg) translatez(25px);
    -o-transform: rotatex(0deg) translatez(25px);
    transform: rotatex(0deg) translatez(25px);
}

.back {
    -webkit-transform: rotatex(-90deg) translatez(25px);
    -moz-transform: rotatex(-90deg) translatez(25px);
    -ms-transform: rotatex(-90deg) translatez(25px);
    -o-transform: rotatex(-90deg) translatez(25px);
    transform: rotatex(-90deg) translatez(25px);
    color: #FFE7C4;
}

.front,
.back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #74adaa;
    padding: 15px 30px 15px 31px;
    color: white;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/

.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
    background-color: #51938f;
    -webkit-background-size: 5px 5px;
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;
    background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}

.nav-menu ul {
    position: absolute;
    text-align: left;
    line-height: 40px;
    font-size: 14px;
    width: 200px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单,并其设置一个变形效果*/
.nav-menu&gt;li:hover ul {
    display: block;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

好了,以上就是全部的css3制作3D旋转导航特效的代码,拿去不谢,如果你有更好的欢迎交流学习。

「如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - css3制作3D旋转导航特效

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流