CSS3特效----制作3D旋转导航
2017-02-13 16:17
666 查看
大致思路：首先给 three-d-box 设置一个 transition是不可少的
然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back，默认状态下 font 旋转0度，也就是没旋转，back 旋转-90度，现在只能看得到 font 看不到 back 当鼠标移动到上面去的时候（任务5这两个样式控制，移动到上面来的时候旋转90度），控制 three-d-box旋转90度，这样，原来的 font 就旋转到后面去了，back 就变成正面朝前了 就可以看到了。
效果如图：
然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back，默认状态下 font 旋转0度，也就是没旋转，back 旋转-90度，现在只能看得到 font 看不到 back 当鼠标移动到上面去的时候（任务5这两个样式控制，移动到上面来的时候旋转90度），控制 three-d-box旋转90度，这样，原来的 font 就旋转到后面去了，back 就变成正面朝前了 就可以看到了。
效果如图：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>制作3D旋转导航</title>
6 <style>
7 @import url("http://www.w3cplus.com/demo/css3/base.css");
8 /*任务一：引入本地字体文件*/
9 @font-face {
10 font-family: 'sansationregular';
11 src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
12 src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
13 url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
14 url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
15 url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
16 font-weight: normal;
17 font-style: normal;
18 }
19 body {
20 background-color:#edecec;
21 }
22
23 /* basic menu styles */
24 .nav-menu {
25 display: block;
26 background: #74adaa;
27 width:950px;
28 margin: 50px auto 150px;
29 }
30 .nav-menu > li {
31 display: inline;
32 float:left;
33 border-right:1px solid #94c0be;
34 }
35 .nav-menu > li:last-child {
36 border-right: none;
37 }
38 .nav-menu li a {
39 color: #fff;
40 display: block;
41 text-decoration: none;
42 /*调用本地字体*/
43 font-family: 'sansationregular';
44 -webkit-font-smoothing: antialiased;
45 -moz-font-smoothing: antialiased;
46 font-smoothing: antialiased;
47 text-transform: capitalize;
48 overflow: visible;
49 line-height: 20px;
50 font-size: 20px;
51 padding: 15px 30px 15px 31px;
52 }
53
54 /* animation domination */
55 .three-d {
56 /* 任务三、设置3D舞台布景 */
57 -webkit-perspective: 200px;
58 -moz-perspective: 200px;
59 -ms-perspective: 200px;
60 -o-perspective: 200px;
61 perspective: 200px;
62
63 /*任务四、设置3D舞台布景过渡效果*/
64 -webkit-transition: all .07s linear;
65 -moz-transition: all .07s linear;
66 -ms-transition: all .07s linear;
67 -o-transition: all .07s linear;
68 transition: all .07s linear;
69 position: relative;
70 }
71
72 .three-d:not(.active):hover {
73 cursor: pointer;
74 }
75 /*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
76 .three-d:not(.active):hover .three-d-box,
77 .three-d:not(.active):focus .three-d-box {
78 -wekbit-transform: translateZ(-25px) rotateX(90deg);
79 -moz-transform: translateZ(-25px) rotateX(90deg);
80 -o-transform: translateZ(-25px) rotateX(90deg);
81 -ms-transform: translateZ(-25px) rotateX(90deg);
82 transform: translateZ(-25px) rotateX(90deg);
83 }
84
85 .three-d-box {
86 /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
87 -webkit-transition: all .3s ease-out;
88 -moz-transition: all .3s ease-out;
89 -ms-transition: all .3s ease-out;
90 -o-transition: all .3s ease-out;
91 transition: all .3s ease-out;
92 -webkit-transform: translatez(-25px);
93 -moz-transform: translatez(-25px);
94 -ms-transform: translatez(-25px);
95 -o-transform: translatez(-25px);
96 transform: translatez(-25px);
97 -webkit-transform-style: preserve-3d;
98 -moz-transform-style: preserve-3d;
99 -ms-transform-style: preserve-3d;
100 -o-transform-style: preserve-3d;
101 transform-style: preserve-3d;
102 -webkit-pointer-events: none;
103 -moz-pointer-events: none;
104 -ms-pointer-events: none;
105 -o-pointer-events: none;
106 pointer-events: none;
107 position: absolute;
108 top: 0;
109 left: 0;
110 display: block;
111 width: 100%;
112 height: 100%;
113 }
114 /*任务七、给导航设置3D前，与3D后变形效果*/
115 .front {
116 -webkit-transform: rotatex(0deg) translatez(25px);
117 -moz-transform: rotatex(0deg) translatez(25px);
118 -ms-transform: rotatex(0deg) translatez(25px);
119 -o-transform: rotatex(0deg) translatez(25px);
120 transform: rotatex(0deg) translatez(25px);
121 }
122
123 .back {
124 -webkit-transform: rotatex(-90deg) translatez(25px);
125 -moz-transform: rotatex(-90deg) translatez(25px);
126 -ms-transform: rotatex(-90deg) translatez(25px);
127 -o-transform: rotatex(-90deg) translatez(25px);
128 transform: rotatex(-90deg) translatez(25px);
129 color: #FFE7C4;
130 }
131
132 .front, .back {
133 display: block;
134 width: 100%;
135 height: 100%;
136 position: absolute;
137 top: 0;
138 left: 0;
139 background: #74adaa;
140 padding: 15px 30px 15px 31px;
141 color: white;
142 -webkit-pointer-events: none;
143 -moz-pointer-events: none;
144 -ms-pointer-events: none;
145 -o-pointer-events: none;
146 pointer-events: none;
147 -webkit-box-sizing: border-box;
148 box-sizing: border-box;
149 }
150 /*任务八、设置导航当前状态与悬浮状态下的背景效果*/
151 .nav-menu li .active .front,
152 .nav-menu li .active .back,
153 .nav-menu li a:hover .front,
154 .nav-menu li a:hover .back {
155 background-color: #51938f;
156 -webkit-background-size: 5px 5px;
157 background-size: 5px 5px;
158 background-position: 0 0, 30px 30px;
159 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);
160 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);
161 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);
162 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);
163 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);
164 }
165 .nav-menu ul {
166 position: absolute;
167 text-align: left;
168 line-height: 40px;
169 font-size: 14px;
170 width: 200px;
171 -webkit-transition: all 0.3s ease-in;
172 -moz-transition: all 0.3s ease-in;
173 -ms-transition: all 0.3s ease-in;
174 -o-transition: all 0.3s ease-in;
175 transition: all 0.3s ease-in;
176 -webkit-transform-origin: 0px 0px;
177 -moz-transform-origin: 0px 0px;
178 -ms-transform-origin: 0px 0px;
179 -o-transform-origin: 0px 0px;
180 transform-origin: 0px 0px;
181 -webkit-transform: rotateX(-90deg);
182 -moz-transform: rotateX(-90deg);
183 -ms-transform: rotateX(-90deg);
184 -o-transform: rotateX(-90deg);
185 transform: rotateX(-90deg);
186 -webkit-backface-visibility: hidden;
187 -moz-backface-visibility: hidden;
188 -ms-backface-visibility: hidden;
189 -o-backface-visibility: hidden;
190 backface-visibility: hidden;
191 }
192 /*任务九、显示下拉导航菜单，并其设置一个变形效果*/
193 .nav-menu > li:hover ul {
194 display: block;
195 -webkit-transform: rotateX(0deg);
196 -moz-transform: rotateX(0deg);
197 -ms-transform: rotateX(0deg);
198 -o-transform: rotateX(0deg);
199 transform: rotateX(0deg);
200 }
201 </style>
202 </head>
203 <body>
204 <div id="nav">
205 <ul class="nav-menu clearfix unstyled">
206 <li><a href="#" class="three-d active">
207 Home
208 <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
209 </a></li>
210 <li><a href="#" class="three-d">
211 Services
212 <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
213 </a></li>
214 <li><a href="#" class="three-d">
215 Products
216 <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
217 </a></li>
218 <li><a href="#" class="three-d">
219 About
220 <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
221 </a></li>
222 <li><a href="#" class="three-d">
223 Contact
224 <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
225 </a></li>
226 <li><a href="#" class="three-d">
227 Blog
228 <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
229 </a>
230 <ul class="clearfix unstyled drop-menu">
231 <li><a href="#" class="three-d">
232 Html5
233 <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
234 </a></li>
235 <li><a href="#" class="three-d">
236 Css3
237 <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
238 </a></li>
239 <li><a href="#" class="three-d">
240 JavaScript
241 <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
242 </a></li>
243 <li><a href="#" class="three-d">
244 Videogames
245 <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
246 </a></li>
247 </ul>
248 </li>
249 <li><a href="#" class="three-d">
250 Shop On-line
251 <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
252 </a></li>
253 </ul>
254 </div>
255 </body>
256 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3:制作3D旋转导航综合练习题
- CSS3特效----制作3D旋转照片展示区
- CSS3实现3D旋转菜单导航
- css3 3D旋转特效
- 制作3D旋转导航综合练习题
- CSS3制作3D旋转视频展示区
- css3带阴影效果的3d旋转电影海报特效
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- css3实现3D立体翻转导航特效
- 纯CSS3制作骰子3D旋转动画效果
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
- 纯css3 3D图片立方体旋转动画特效
- css3实现3d旋转动画特效
- CSS3制作3D旋转视频展示区
- css3相册图片3D旋转展示特效
- CSS3 制作旋转的大风车
- Android中轴旋转特效实现，制作别样的图片浏览器
- css3 - 透视、旋转、曲线运动等3d动画
- css3 3D特效