CSS3构建的3D盒子之导航应用
1.在用css3构建的盒子表面，放上iframe，来加载导航页面。
2.鼠标左键按下移动可旋转盒子，寻找想要的网址。
3.左键单机盒子表面，将全屏现实所点盒子表面的网站[iframe中]，并可浏览，关闭后返回原来状态。
4.PC端，将额外显示2个css3做的旋转盒子[没什么意义]
5.移动端只显示一个导航盒子[模拟器正常，真机无效，留待以后查看，兼容开发有待提高。。。]
注：原本打算排列导航盒子，这样的话导航也变得比较好玩
但是，如果使用iframe来显示网站预览的话，速度太慢，太耗内存
尝试过用html2canvas，但是由于跨域问题，直接被灭
解决方法：通过服务器返回较实时的网站预览图的方式显示
---
可执行代码下载地址
http://download.csdn.net/detail/wangxsh42/8522151
---
效果图
PC端：
在线：
http://wangxinsheng.herokuapp.com/3dboxHome
代码段：
1.css3盒子构建：
html:
1 <div class="cubeOut" style="left:25%;top:35%"> 2 <div class='cube move'> 3 <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 4 <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 5 <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 6 <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 7 <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 8 <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div> 9 </div> 10 </div>
css3:
1 .cubeOut{ 2 height: 100%; 3 left: 50%; 4 margin-left: -10em; 5 margin-top: -10em; 6 -webkit-perspective: 1000px; 7 -ms-perspective: 1000px; 8 perspective: 1000px; 9 position: absolute; 10 top: 50%; 11 width: 100%; 12 } 13 .cube { 14 height: 100%; 15 position: absolute; 16 -webkit-transform-style: preserve-3d; 17 -ms-transform-style: preserve-3d; 18 transform-style: preserve-3d; 19 width: 100%; 20 transform: rotateX(-35deg) rotateY(35deg); 21 } 22 .cubeOut .move{ -webkit-animation: 6s spin linear infinite; 23 animation: 6s spin linear infinite;} 24 .cube * { 25 border: 2px solid rgba(54, 226, 248, 0.5); 26 display: block; 27 height: 100%; 28 position: absolute; 29 width: 100%; 30 } 31 .face { 32 cursor:pointer; 33 height: 100%; 34 position: absolute; 35 width: 100%; 36 } 37 .face:nth-child(1) { 38 transform: rotateY(0deg) translateZ(150px); 39 background: rgba(255, 102, 102, 0.75); 40 } 41 .face:nth-child(2) { 42 transform: rotateY(90deg) translateZ(150px); 43 background: rgba(179, 255, 102, 0.75); 44 } 45 .face:nth-child(3) { 46 transform: rotateY(180deg) translateZ(150px); 47 background: rgba(102, 255, 255, 0.75); 48 } 49 .face:nth-child(4) { 50 transform: rotateY(270deg) translateZ(150px); 51 background: rgba(178, 102, 255, 0.75); 52 } 53 .face:nth-child(5) { 54 transform: rotateX(90deg) translateZ(150px); 55 background: rgba(178, 102, 255, 0.75); 56 } 57 .face:nth-child(6) { 58 transform: rotateX(-90deg) translateZ(150px); 59 background: rgba(178, 102, 255, 0.75); 60 } 61 @keyframes spin { 62 from { 63 -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); 64 transform: translateZ(-10em) rotateX(0) rotateY(0deg); 65 } 66 67 to { 68 -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); 69 transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); 70 } 71 } 72 @-webkit-keyframes spin { 73 from { 74 -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); 75 transform: translateZ(-10em) rotateX(0) rotateY(0deg); 76 } 77 78 to { 79 -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); 80 transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); 81 } 82 }