CSS3-3D导航(transform:rotate)

借助transform:rotate实现上图的3D导航效果 

具体代码如下

 1     <div class="nav">
 2         <ul>
 3             <li>
 4                 <a href="#">首页a>
 5                 <a href="#">indexa>
 6             li>
 7             <li><a href="#">新闻a>
 8                 <a href="#">newsa>
 9             li>
10             <li><a href="#">产品a>
11                 <a href="#">producta>
12             li>
13             <li><a href="#">关于a>
14                 <a href="#">abouta>
15             li>
16         ul>
17     div>

 1 <style>
 2     .nav {
 3         margin: 200px auto;
 4         width: 600px;
 5 
 6     }
 7 
 8     ul {
 9         list-style: none;
10     }
11 
12     .nav li {
13         float: left;
14         position: relative;
15         width: 100px;
16         height: 50px;
17         line-height: 50px;
18         /* 需要在父元素设置transform-style:preserve-3d 以实现子元素的3d效果 */
19         transform-style: preserve-3d;
20 
21         transition: all .5s;
22     }
23 
24     .nav li a {
25         position: absolute;
26         top: 0;
27         left: 0;
28         width: 100%;
29         height: 100%;
30         text-align: center;
31         text-decoration: none;
32         color: #fff;
33     }
34 
35     .nav li a:first-child {
36         transform: translateZ(25px);
37         background-color: green;
38     }
39 
40     .nav li a:last-child {
41         /* 此时橙色盒子躺平之后，需要俯视才能看到橙色盒子，看它的方向始终是Z轴方向，所以这里要向Z轴移动，相当于旋转的时候它的三个轴也会跟着旋转 */
42         transform: rotateX(90deg) translateZ(25px);
43         background-color: orange;
44     }
45 
46     .nav li:hover {
47         transform: rotateX(-90deg);
48     }
49 style>

rotate旋转的时候遵循左手法则：轻握左手，大拇指指向旋转轴正方向，四指指向的方向就是旋转方向。屏幕到眼睛方向为rotate的Z轴正方向，水平为X，垂直是Y，如下图所示