你的位置:首页 > Java教程

[Java教程][应用][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>

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 }

View Code

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;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   }

View Code

---

css3 3D盒子代码参考:

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

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

 ---

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