CSS3_3D导航栏
Posted FIONA-SUN
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3_3D导航栏相关的知识，希望对你有一定的参考价值。
最近做了一个效果比较差的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>
效果展示：
By the way,IE不支持transform-style;所以没有3D效果。
( list-style:none有问题？？ )
以上内容，如有错误请指出，不甚感激。
以上是关于CSS3_3D导航栏的主要内容，如果未能解决你的问题，请参考以下文章