[应用][js+css3]3D盒子导航[PC端]

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>

原标题：[应用][js+css3]3D盒子导航[PC端]

关键词：JS