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 }
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 function iframeload() { 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 function mousedown(e){ 11 mouse.x=e.pageX; 12 mouse.y=e.pageY; 13 canmove = true; 14 } 15 function mouseup(e){ 16 mouse.x=null; 17 mouse.y=null; 18 canmove = false; 19 } 20 function mousemove(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 function mouseclick(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;"+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移动端模拟器效果[真机目前无效，留待以后查看问题]：
