[应用][js+css3]3D盒子导航[PC端]_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了[应用][js+css3]3D盒子导航[PC端]_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7361字，纯文字阅读大概需要11分钟。
内容图文
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:
12310456789
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("");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 $("关闭").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移动端模拟器效果[真机目前无效，留待以后查看问题]：
内容总结
以上是互联网集市为您收集整理的[应用][js+css3]3D盒子导航[PC端]_html/css_WEB-ITnose全部内容，希望文章能够帮你解决[应用][js+css3]3D盒子导航[PC端]_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。