最近做了一个效果比较差的3d导航栏，（后续会更新,因为效果差的无以复加)
以此文鞭策自己。
贴上代码：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>css3-3d导航栏</title>
5 <meta charset="utf-8" />
6 <style type="text/css">
7 *{
8 padding: 0;
9 margin: 0;
10 text-shadow:none;
11 }
12 ul{
13 list-style: none;
14 }
15 a{
16 text-decoration: none;
17 color: #fff;
18 }
19 .wrapper{
20 width: 600px;
21 margin: 100px auto;
22 }
23 .nav{
24 position: relative;
25
26 /*-webkit-perspective:1000; Safari 和 Chrome */
27 }
28 .nav li{
29 text-align: center;
30 color: #fff;
31 font-size: 20px;
32 font-weight: bold;
33 line-height: 60px;
34 border-right:1px solid #94c0be;
35 }
36 .three-d{
37 height: 60px;
38 width: 120px;
39 float: left;
40 position: relative;
41
42 transform-style:preserve-3d;
43 -webkit-transform-style:preserve-3d;
44 -moz-transform-style:preserve-3d;
45 -ms-transform-style:preserve-3d;
46 -o-transform-style:preserve-3d;
47
48 transition:all .5s linear;
49 -webkit-transition:all .5s linear;
50 -moz-transition:all .5s linear;
51 -ms-transition:all .5s linear;
52 -o-transition:all .5s linear;
53 }
54 .three-d a{
55 height: 60px;
56 width: 120px;
57 background: #74adaa;
58 position: absolute;
59 left: 0px;
60 top: 0px;
61 }
62 .page1{
63 transform:translateZ(30px);
64 -webkit-transform:translateZ(30px);
65 -moz-transform:translateZ(30px);
66 -ms-transform:translateZ(30px);
67 -o-transform:translateZ(30px);
68 }
69 .page2{
70 transform:rotateX(90deg) translateZ(30px);
71 -webkit-transform:rotateX(90deg) translateZ(30px);
72 -moz-transform:rotateX(90deg) translateZ(30px);
73 -ms-transform:rotateX(90deg) translateZ(30px);
74 -o-transform:rotateX(90deg) translateZ(30px);
75 }
76 .three-d:hover{
77 transform:rotateX(-90deg) translateY(30px);
78 -webkit-transform:rotateX(-90deg) translateY(30px);
79 -moz-transform:rotateX(-90deg) translateY(30px);
80 -ms-transform:rotateX(-90deg) translateY(30px);
81 -o-transform:rotateX(-90deg) translateY(30px);
82 }
83
84 .clearfix{
85 clear: both;
86 }
87 .three-two{
88 position: relative;
89 }
90 .nav ul{
91 position: absolute;
92 text-align: left;
93 line-height: 60px;
94 font-size: 14px;
95 top: 60px;
96 transform-origin: top;
97 -webkit-transform-origin: top;
98 -moz-transform-origin: top;
99 -ms-transform-origin: top;
100 -o-transform-origin: top;
101
102 transform: rotateX(90deg) translateY(30px) translateZ(60px);
103 -webkit-transform: rotateX(90deg) translateY(30px) translateZ(60px);
104 -moz-transform: rotateX(90deg) translateY(30px) translateZ(60px);
105 -ms-transform: rotateX(90deg) translateY(30px) translateZ(60px);
106 -o-transform: rotateX(90deg) translateY(30px) translateZ(60px);
107
108
109 }
110 .nav ul li{
111 width: 160px;
112 border: none;
113 }
114 .nav ul .three-d a{
115 width: 160px;
116 }
117 .nav>li:hover ul li{
118 margin-top: 1px;
119
120 perspective-origin:100% 100%;
121 -webkit-perspective-origin:100% 100%;
122
123 transform:transform(0px) translateZ(-500px);
124 -webkit-transform:transform(0px) translateZ(-500px);
125 -moz-transform:transform(0px) translateZ(-500px);
126 -ms-transform:transform(0px) translateZ(-500px);
127 -o-transform:transform(0px) translateZ(-500px);
128 }
129 .three-d:hover>a{
130 background-color: #51938F;
131 background-size: 5px 5px;
132 background-position: 0 0, 30px 30px;
133 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);
134 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);
135 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);
136 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);
137 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);
138 }
139 </style>
140
141 </head>
142 <body>
143 <div class="wrapper">
144 <div class="navigation">
145 <ul class="nav">
146
147 <li class="three-d">
148 <a href="#" class="page1">Home</a>
149 <a href="#" class="page2">Home</a>
150 </li>
151
152 <li class="three-d">
153
154 <a href="#" class="page1">Article</a>
155 <a href="#" class="page2">Article</a>
156 <div class="clearfix"></div>
157 <ul>
158 <li class="three-d">
159 <a href="#" class="page1">css</a>
160 <a href="#" class="page2">css</a>
161 </li>
162 <li class="three-d">
163 <a href="#" class="page1">html</a>
164 <a href="#" class="page2">html</a>
165 </li>
166 </ul>
167 </li>
168
169 <li class="three-d">
170 <a href="#" class="page1">Comment</a>
171 <a href="#" class="page2">Comment</a>
172 </li>
173 <li class="three-d">
174 <a href="#" class="page1">Contact</a>
175 <a href="#" class="page2">Contact</a>
176 </li>
177 </ul>
178
179 <div class="clearfix"></div>
180 </div>
181 </div>
182 <script>
183
184
185 </script>
186 </body>
187 </html>
效果展示：
li:hover ul li{
margin-top: 1px;
perspective-origin:100% 100%;
-webkit-perspective-origin:100% 100%;
transform:transform(0px) translateZ(-500px);
-webkit-transform:transform(0px) translateZ(-500px);
-moz-transform:transform(0px) translateZ(-500px);
-ms-transform:transform(0px) translateZ(-500px);
-o-transform:transform(0px) translateZ(-500px);
}
.three-d:hover>a{
background-color: #51938F;
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);
}
-->
- Home Home
- Article Article
- css css
- html html
- Comment Comment
- Contact Contact
By the way,IE不支持transform-style;所以没有3D效果。
( list-style:none有问题？？ )
以上内容，如有错误请指出，不甚感激。