[应用][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:

 <div class="cubeOut" style="left:25%;top:35%">
     <div class='cube move'>
         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
         <div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
     </div>
 </div>

css3:

 .cubeOut{
   height: 100%;
   left: 50%;
   margin-left: -10em;
   margin-top: -10em;
   -webkit-perspective: 1000px;
   -ms-perspective: 1000px;
   perspective: 1000px;
   position: absolute;
   top: 50%;
   width: 100%;
   }
 .cube {
   height: 100%;
   position: absolute;
   -webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
   width: 100%;
   transform: rotateX(-35deg) rotateY(35deg);
 }
 .cubeOut .move{ -webkit-animation: 6s spin linear infinite;
   animation: 6s spin linear infinite;}
 .cube * {
   border: 2px solid rgba(54, 226, 248, 0.5);
   display: block;
   height: 100%;
   position: absolute;
   width: 100%;
 }
 .face {
   cursor:pointer;
   height: 100%;
   position: absolute;
   width: 100%;
 }
 .face:nth-child(1) {
   transform: rotateY(0deg) translateZ(150px);
   background: rgba(255, 102, 102, 0.75);
 }
 .face:nth-child(2) {
   transform: rotateY(90deg) translateZ(150px);
   background: rgba(179, 255, 102, 0.75);
 }
 .face:nth-child(3) {
   transform: rotateY(180deg) translateZ(150px);
   background: rgba(102, 255, 255, 0.75);
 }
 .face:nth-child(4) {
   transform: rotateY(270deg) translateZ(150px);
   background: rgba(178, 102, 255, 0.75);
 }
 .face:nth-child(5) {
   transform: rotateX(90deg) translateZ(150px);
   background: rgba(178, 102, 255, 0.75);
 }
 .face:nth-child(6) {
   transform: rotateX(-90deg) translateZ(150px);
   background: rgba(178, 102, 255, 0.75);
 }
 @keyframes spin {
   from {
     -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
     transform: translateZ(-10em) rotateX(0) rotateY(0deg);
   }

   to {
     -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
     transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
   }
 }
 @-webkit-keyframes spin {
   from {
     -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
     transform: translateZ(-10em) rotateX(0) rotateY(0deg);
   }

   to {
     -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
     transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
   }
 }

2.js操作代码

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

 $(".cube").find("iframe").each(function(i){
     if(this.attributes.url.value!=''){
     this.style.height = 1024+"px";
     this.style.width = 1024+"px";
     this.onload = this.onreadystatechange = iframeload;
     this.src = this.attributes.url.value;}
 });

 function iframeload() {
     if(outFrame===this){return;}
     if (!this.readyState || this.readyState == "complete") {
         this.focus();
         this.style.transformOrigin = "left top";
         this.style.transform = "scale("+targetWidth/1024+")";
         this.style.display="block";
         $(this).attr("loaded","1");
     }
 }

盒子旋转操作

 var overs = document.querySelectorAll(".fix .over");
 for(var i =0;i<overs.length;i++){
     if($(overs[i]).prev().prev().attr("url")!='')
         overs[i].addEventListener("click", mouseclick, false);
     overs[i].addEventListener("mousedown", mousedown, false);
     document.addEventListener("mouseup", mouseup, false);
     overs[i].addEventListener("mousemove", mousemove, false);
 }

 function mousedown(e){
     mouse.x=e.pageX;
     mouse.y=e.pageY;
     canmove = true;
 }
 function mouseup(e){
     mouse.x=null;
     mouse.y=null;
     canmove = false;
 }
 function mousemove(e){
     if(canmove && mouse.x!=null && mouse.y!=null){
         var ydeg=0,xdeg=0;
         xdeg = e.touches[0].pageX - mouse.x;
         ydeg = e.touches[0].pageY - mouse.y;
         xd =  (xd + xdeg)%360;
         yd = (yd -ydeg)%360;
         e.touches[0].target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";
         mouse.x=e.touches[0].pageX;
         mouse.y=e.touches[0].pageY;     }
 }

盒子点击操作

     function mouseclick(e){
         var index = $(e.target.parentNode.parentNode.parentNode).find(".over").index($(e.target));
         switch(index){
             case 0:
                 xd = 0;
                 yd = 0;
                 break;
             case 1:
                 xd = -270;
                 yd = 0;
                 break;
             case 2:
                 xd = -180;
                 yd = 0;
                 break;
             case 3:
                 xd = -90;
                 yd = 0;
                 break;
             case 4:
                 xd = 0;
                 yd = -90;
                 break;
             case 5:
                 xd = 0;
                 yd = 90;
                 break;
             default:;
         }
         outFrame = e.target.parentNode.parentNode.getElementsByTagName("iframe")[index];

         if($(outFrame).attr("loaded")=="0")
             return;

         $(e.target).unbind();
         mouse.x=null;
         mouse.y=null;
         canmove = false;
         e.target.parentNode.parentNode.parentNode.style.zIndex="1000";
         $("#grayDiv").remove();
         $("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>");

         e.target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";
         $(outFrame).attr("loaded","0");
         outFace = $(e.target).prev();
         $(outFrame).appendTo("#grayDiv");
         $(outFrame).attr("scrolling","auto");
         outFrame.style.transform = "scale("+1+")";
         $(outFrame).css("height",window.innerHeight+"px");
         $(outFrame).css("width",window.innerWidth+"px");
         e.target.parentNode.parentNode.parentNode.style.zIndex="2";
         $("<div id='close' style='position:absolute;left:0;top:0;'>关闭</div>").appendTo("#grayDiv");
         $("#close").click(function(e){
             $(outFrame).insertBefore(outFace);
             $(outFrame).attr("scrolling","no");
             outFrame.style.transform = "scale("+targetWidth/1024+")";
             $(outFrame).css("height",1024+"px");
             $(outFrame).css("width",1024+"px");
             outFrame = null;
             outFace = null;
             $("#grayDiv").remove();
         });
     }

---

css3 3D盒子代码参考：

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

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

---

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