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

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

时间： 2025-01-02 18:40:21

[应用][js+css3]3D盒子导航[PC端]的相关文章

JS判断手机端还是pc端

如何判断页面是在移动端还是PC端打开的呢 window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "http://news.baidu.com/";

使用js判断手机端和pc端浏览器内核

<span style="font-size:24px;color:#ff0000;">手机端:</span> <span style="font-size:14px;color:#339999;">//判断浏览器 var browser = { versions : function() { var u = navigator.userAgent, app = navigator.appVersion; return { tri

js实现拖拽兼容pc端和手机端

pc端拖动时候用到的三个事件:mousedown.mousemove.mouseup 在移动端与之相对应的分别是:touchstart.touchmove.touchend事件. 还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY, 在移动端获取坐标位置则是:event.touches[0].clientX和event.touches[0].clientY //判断当前是touch还是clickvar touch; if(event.touch

js判断是手机还是PC端

有时接触一些手机上的适应,需要知道是pc 还是移动端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v

js判断当前浏览器是pc端还是移动端

根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. 1 <script type="text/javascript"> 2 function browserRedirect() { 3 var sUserAgent = navigator.userAgent.toLowerCase(); 4 var bIsIpad = sUserAgent.match(/ipad/i) == "ipad&q

js 判断移动设备、pc端、android、iPhone、是否为微信、微博、qq空间

var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1,

CSS3 3D 盒子模型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } .wrap{ width:200px; height:200px; borde

css3 3D盒子效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 ul{ 11 margin: 0; 12 padding: 0; 13 list-style: none; 14 } 15 .wrap{ 16 width: 198px;

JS判断手机端和PC端自动跳转

<script type="text/javascript"> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone