Heim  >  Artikel  >  Web-Frontend  >  [应用][js+css3]3D盒子导航[PC端]_html/css_WEB-ITnose

[应用][js+css3]3D盒子导航[PC端]_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:431168Durchsuche

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;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移动端模拟器效果[真机目前无效,留待以后查看问题]:

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn