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 <divclass="cubeOut"style="left:25%;top:35%">
2     <divclass='cubemove'>
3         <divclass='face'><iframescrolling="no"loaded="0"url=""></iframe><divclass="label"></div><divclass="over"></div></div>
4         <divclass='face'><iframescrolling="no"loaded="0"url=""></iframe><divclass="label"></div><divclass="over"></div></div>
5         <divclass='face'><iframescrolling="no"loaded="0"url=""></iframe><divclass="label"></div><divclass="over"></div></div>
6         <divclass='face'><iframescrolling="no"loaded="0"url=""></iframe><divclass="label"></div><divclass="over"></div></div>
7         <divclass='face'><iframescrolling="no"loaded="0"url=""></iframe><divclass="label"></div><divclass="over"></div></div>
8         <divclass='face'><iframescrolling="no"loaded="0"url=""></iframe><divclass="label"></div><divclass="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 }

2.js操作代码

iframe加载操作[缩放iframe大小，默认以1024宽度访问网站]

1 $(".cube").find("iframe").each(function(i){2     if(this.attributes.url.value!=''){3     this.style.height = 1024+"px";4     this.style.width = 1024+"px";5     this.onload = this.onreadystatechange =iframeload;6     this.src = this.attributes.url.value;}7 });8
9 functioniframeload() {10     if(outFrame===this){return;}11     if (!this.readyState || this.readyState == "complete") {12         this.focus();13         this.style.transformOrigin = "left top";14         this.style.transform = "scale("+targetWidth/1024+")";
15         this.style.display="block";16         $(this).attr("loaded","1");17 }18 }

盒子旋转操作

1 var overs = document.querySelectorAll(".fix .over");2 for(var i =0;i<overs.length;i++){3     if($(overs[i]).prev().prev().attr("url")!='')4         overs[i].addEventListener("click", mouseclick, false);5     overs[i].addEventListener("mousedown", mousedown, false);6     document.addEventListener("mouseup", mouseup, false);7     overs[i].addEventListener("mousemove", mousemove, false);8 }9
10 functionmousedown(e){11     mouse.x=e.pageX;12     mouse.y=e.pageY;13     canmove = true;14 }15 functionmouseup(e){16     mouse.x=null;17     mouse.y=null;18     canmove = false;19 }20 functionmousemove(e){21     if(canmove && mouse.x!=null && mouse.y!=null){22         var ydeg=0,xdeg=0;23         xdeg = e.touches[0].pageX -mouse.x;24         ydeg = e.touches[0].pageY -mouse.y;25         xd =  (xd + xdeg)%360;26         yd = (yd -ydeg)%360;27         e.touches[0].target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";28         mouse.x=e.touches[0].pageX;29         mouse.y=e.touches[0].pageY;31 }32 }

盒子点击操作

1     functionmouseclick(e){2         var index = $(e.target.parentNode.parentNode.parentNode).find(".over").index($(e.target));3         switch(index){4             case 0:5                 xd = 0;6                 yd = 0;7                 break;8             case 1:9                 xd = -270;10                 yd = 0;11                 break;12             case 2:13                 xd = -180;14                 yd = 0;15                 break;16             case 3:17                 xd = -90;18                 yd = 0;19                 break;20             case 4:21                 xd = 0;22                 yd = -90;23                 break;24             case 5:25                 xd = 0;26                 yd = 90;27                 break;28             default:;29 }30         outFrame = e.target.parentNode.parentNode.getElementsByTagName("iframe")[index];31
32         if($(outFrame).attr("loaded")=="0")33             return;34
35 $(e.target).unbind();36         mouse.x=null;37         mouse.y=null;38         canmove = false;39         e.target.parentNode.parentNode.parentNode.style.zIndex="1000";40         $("#grayDiv").remove();41         $("body").append("<div id='grayDiv' style='position:absolute;left:0px;top:0px;background-color:rgba(0,0,0,0.8);z-index:999;width:"+window.innerWidth+"px;height:"+window.innerHeight+"px;'></div>");42
43         e.target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";44         $(outFrame).attr("loaded","0");45         outFace =$(e.target).prev();46         $(outFrame).appendTo("#grayDiv");47         $(outFrame).attr("scrolling","auto");48         outFrame.style.transform = "scale("+1+")";49         $(outFrame).css("height",window.innerHeight+"px");50         $(outFrame).css("width",window.innerWidth+"px");51         e.target.parentNode.parentNode.parentNode.style.zIndex="2";52         $("<div id='close' style='position:absolute;left:0;top:0;'>关闭</div>").appendTo("#grayDiv");53         $("#close").click(function(e){54 $(outFrame).insertBefore(outFace);55             $(outFrame).attr("scrolling","no");56             outFrame.style.transform = "scale("+targetWidth/1024+")";
57             $(outFrame).css("height",1024+"px");58             $(outFrame).css("width",1024+"px");59             outFrame = null;60             outFace = null;61             $("#grayDiv").remove();62 });63     }

---

css3 3D盒子代码参考：

http://www.html5tricks.com/html5-animated-cube.html

http://www.html5tricks.com/html5-3d-cube.html

---

chrome移动端模拟器效果[真机目前无效，留待以后查看问题]：