当前位置:Gxlcms > html代码 > [应用][js+css3]3D盒子导航[PC端]_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:8人阅读

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 
2
3
4
5
6
7
8
9
10

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

盒子点击操作

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

人气教程排行