CSS3特效----制作3D旋转导航
大致思路：首先给 three-d-box 设置一个 transition是不可少的
然后每个 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>
