9-10 制作3D旋转导航综合练习题
本节编程练习不计算学习进度，请电脑登录imooc.com操作

制作3D旋转导航综合练习题

小伙伴们，根据变形transform和过渡transition等内容，实现如下3D旋转动画下拉导航

案例在线演示地址：http://codepen.io/airen/pen/icFba

任务

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

2、调用自定义的字体

3、设置3D舞台布景

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

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

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

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

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

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

index.html 
  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.  
  10.         body {
  11.         	background-color:#edecec;
  12.         }
  13.  
  14.         /* basic menu styles */
  15.         .nav-menu {
  16.           display: block;
  17.         	background: #74adaa;
  18.         	width:950px;
  19.         	margin: 50px auto 150px;
  20.         }
  21.         .nav-menu > li {
  22.           display: inline;
  23.           float:left;			
  24.         	border-right:1px solid #94c0be;
  25.         }
  26.         .nav-menu > li:last-child {
  27.           border-right: none;
  28.         }
  29.         .nav-menu li a {
  30.           color: #fff;
  31.         	display: block;
  32.         	text-decoration: none;
  33.           /*调用本地字体*/
  34.  
  35.           -webkit-font-smoothing: antialiased;
  36.         	-moz-font-smoothing: antialiased;
  37.         	font-smoothing: antialiased;
  38.         	text-transform: capitalize;
  39.         	overflow: visible;
  40.         	line-height: 20px;
  41.         	font-size: 20px;
  42.         	padding: 15px 30px 15px 31px;			
  43.         }
  44.  
  45.  
  46.         .three-d {
  47.           /* 任务三、设置3D舞台布景 */
  48.  
  49.           /*任务四、设置3D舞台布景过渡效果*/
  50.  
  51.           position: relative;
  52.         }
  53.  
  54.         .three-d:not(.active):hover {
  55.           cursor: pointer;
  56.         }
  57.  
  58.         /*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
  59.         .three-d:not(.active):hover .three-d-box, 
  60.         .three-d:not(.active):focus .three-d-box {
  61.  
  62.         }
  63.  
  64.         .three-d-box {
  65.           /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
  66.  
  67.           -webkit-transform-style: preserve-3d;
  68.           -moz-transform-style: preserve-3d;
  69.           -ms-transform-style: preserve-3d;
  70.           -o-transform-style: preserve-3d;
  71.           transform-style: preserve-3d;
  72.           -webkit-pointer-events: none;
  73.           -moz-pointer-events: none;
  74.           -ms-pointer-events: none;
  75.           -o-pointer-events: none;
  76.           pointer-events: none;
  77.           position: absolute;
  78.           top: 0;
  79.         	left: 0;
  80.         	display: block;
  81.         	width: 100%;
  82.         	height: 100%;
  83.         }
  84.  
  85.         /*任务七、给导航设置3D前，与3D后变形效果*/
  86.         .front {
  87.  
  88.          }
  89.  
  90.         .back {
  91.  
  92.           color: #FFE7C4;
  93.         }
  94.  
  95.         .front, .back {
  96.           display: block;
  97.         	width: 100%;
  98.         	height: 100%;
  99.         	position: absolute;
  100.         	top: 0;
  101.         	left: 0;
  102.         	background: #74adaa;
  103.         	padding: 15px 30px 15px 31px;	
  104.         	color: white;
  105.         	-webkit-pointer-events: none;
  106.           -moz-pointer-events: none;
  107.           -ms-pointer-events: none;
  108.           -o-pointer-events: none;
  109.           pointer-events: none;
  110.           -webkit-box-sizing: border-box;
  111.           box-sizing: border-box;
  112.         }
  113.         /*任务八、设置导航当前状态与悬浮状态下的背景效果*/
  114.         .nav-menu li .active .front,
  115.         .nav-menu li .active .back,
  116.         .nav-menu li a:hover .front,
  117.         .nav-menu li a:hover .back {
  118.  
  119.         }
  120.         .nav-menu ul {
  121.           position: absolute;
  122.         	text-align: left;
  123.         	line-height: 40px;
  124.         	font-size: 14px;
  125.         	width: 200px;
  126.         	-webkit-transition: all 0.3s ease-in;
  127.           -moz-transition: all 0.3s ease-in;
  128.           -ms-transition: all 0.3s ease-in;
  129.           -o-transition: all 0.3s ease-in;
  130.           transition: all 0.3s ease-in;
  131.           -webkit-transform-origin: 0px 0px;
  132.           -moz-transform-origin: 0px 0px;
  133.           -ms-transform-origin: 0px 0px;
  134.           -o-transform-origin: 0px 0px;
  135.           transform-origin: 0px 0px;
  136.           -webkit-transform: rotateX(-90deg);
  137.           -moz-transform: rotateX(-90deg);
  138.           -ms-transform: rotateX(-90deg);
  139.           -o-transform: rotateX(-90deg);
  140.           transform: rotateX(-90deg);
  141.           -webkit-backface-visibility: hidden;
  142.           -moz-backface-visibility: hidden;
  143.           -ms-backface-visibility: hidden;
  144.           -o-backface-visibility: hidden;
  145.         	backface-visibility: hidden;
  146.         }
  147.         /*任务九、显示下拉导航菜单，并其设置一个变形效果*/
  148.         .nav-menu > li:hover ul {
  149.           display: block;
  150.          }
  151. 	</style>
  152. </head>
  153. <body>
  154. 	<div id="nav">
  155. 		<ul class="nav-menu clearfix unstyled">
  156. 			<li><a href="#" class="three-d active">
  157. 				Home
  158. 				<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
  159. 			</a></li>
  160. 			<li><a href="#" class="three-d">
  161. 				Services
  162. 				<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
  163. 			</a></li>
  164. 			<li><a href="#" class="three-d">
  165. 				Products
  166. 				<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
  167. 			</a></li>
  168. 			<li><a href="#" class="three-d">
  169. 				About
  170. 				<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
  171. 			</a></li>
  172. 			<li><a href="#" class="three-d">
  173. 				Contact
  174. 				<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
  175. 			</a></li>
  176. 			<li><a href="#" class="three-d">
  177. 				Blog
  178. 				<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>
  179. 				<ul class="clearfix unstyled drop-menu">
  180. 					<li><a href="#" class="three-d">
  181. 							Html5
  182. 							<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
  183. 					</a></li>
  184. 					<li><a href="#" class="three-d">
  185. 						Css3
  186. 						<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
  187. 					</a></li>
  188. 					<li><a href="#" class="three-d">
  189. 						JavaScript
  190. 						<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
  191. 					</a></li>
  192. 					<li><a href="#" class="three-d">
  193. 						Videogames
  194. 						<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
  195. 					</a></li>
  196. 				</ul>
  197. 			</li>
  198. 			<li><a href="#" class="three-d">
  199. 				Shop On-line
  200. 				<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
  201. 			</a></li>
  202. 		</ul>
  203. 	</div>
  204. </body>
  205. </html>
下一节