[应用][js+css3]3D盒子导航[PC端]

时间:2023-12-24 22:58:31

CSS3构建的3D盒子之导航应用

1.在用css3构建的盒子表面,放上iframe,来加载导航页面。

2.鼠标左键按下移动可旋转盒子,寻找想要的网址。

3.左键单机盒子表面,将全屏现实所点盒子表面的网站[iframe中],并可浏览,关闭后返回原来状态。

4.PC端,将额外显示2个css3做的旋转盒子[没什么意义]

5.移动端只显示一个导航盒子[模拟器正常,真机无效,留待以后查看,兼容开发有待提高。。。]

注:原本打算排列导航盒子,这样的话导航也变得比较好玩

但是,如果使用iframe来显示网站预览的话,速度太慢,太耗内存

尝试过用html2canvas,但是由于跨域问题,直接被灭

解决方法:通过服务器返回较实时的网站预览图的方式显示

---

可执行代码下载地址

http://download.csdn.net/detail/wangxsh42/8522151

---

效果图

PC端:

[应用][js+css3]3D盒子导航[PC端] [应用][js+css3]3D盒子导航[PC端]

[应用][js+css3]3D盒子导航[PC端] [应用][js+css3]3D盒子导航[PC端]

在线:

http://wangxinsheng.herokuapp.com/3dboxHome

代码段:

1.css3盒子构建:

html:

 <div class="cubeOut" style="left:25%;top:35%">
<div class='cube move'>
<div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
<div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
<div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
<div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
<div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
<div class='face'><iframe scrolling="no" loaded="0" url=""></iframe><div class="label"></div><div class="over"></div></div>
</div>
</div>

css3:

 .cubeOut{
height: 100%;
left: 50%;
margin-left: -10em;
margin-top: -10em;
-webkit-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
position: absolute;
top: 50%;
width: 100%;
}
.cube {
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
transform: rotateX(-35deg) rotateY(35deg);
}
.cubeOut .move{ -webkit-animation: 6s spin linear infinite;
animation: 6s spin linear infinite;}
.cube * {
border: 2px solid rgba(54, 226, 248, 0.5);
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.face {
cursor:pointer;
height: 100%;
position: absolute;
width: 100%;
}
.face:nth-child(1) {
transform: rotateY(0deg) translateZ(150px);
background: rgba(255, 102, 102, 0.75);
}
.face:nth-child(2) {
transform: rotateY(90deg) translateZ(150px);
background: rgba(179, 255, 102, 0.75);
}
.face:nth-child(3) {
transform: rotateY(180deg) translateZ(150px);
background: rgba(102, 255, 255, 0.75);
}
.face:nth-child(4) {
transform: rotateY(270deg) translateZ(150px);
background: rgba(178, 102, 255, 0.75);
}
.face:nth-child(5) {
transform: rotateX(90deg) translateZ(150px);
background: rgba(178, 102, 255, 0.75);
}
.face:nth-child(6) {
transform: rotateX(-90deg) translateZ(150px);
background: rgba(178, 102, 255, 0.75);
}
@keyframes spin {
from {
-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
} to {
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
} to {
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}

2.js操作代码

iframe加载操作[缩放iframe大小,默认以1024宽度访问网站]

 $(".cube").find("iframe").each(function(i){
if(this.attributes.url.value!=''){
this.style.height = 1024+"px";
this.style.width = 1024+"px";
this.onload = this.onreadystatechange = iframeload;
this.src = this.attributes.url.value;}
}); function iframeload() {
if(outFrame===this){return;}
if (!this.readyState || this.readyState == "complete") {
this.focus();
this.style.transformOrigin = "left top";
this.style.transform = "scale("+targetWidth/1024+")";
this.style.display="block";
$(this).attr("loaded","1");
}
}

盒子旋转操作

 var overs = document.querySelectorAll(".fix .over");
for(var i =0;i<overs.length;i++){
if($(overs[i]).prev().prev().attr("url")!='')
overs[i].addEventListener("click", mouseclick, false);
overs[i].addEventListener("mousedown", mousedown, false);
document.addEventListener("mouseup", mouseup, false);
overs[i].addEventListener("mousemove", mousemove, false);
} function mousedown(e){
mouse.x=e.pageX;
mouse.y=e.pageY;
canmove = true;
}
function mouseup(e){
mouse.x=null;
mouse.y=null;
canmove = false;
}
function mousemove(e){
if(canmove && mouse.x!=null && mouse.y!=null){
var ydeg=0,xdeg=0;
xdeg = e.touches[0].pageX - mouse.x;
ydeg = e.touches[0].pageY - mouse.y;
xd = (xd + xdeg)%360;
yd = (yd -ydeg)%360;
e.touches[0].target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";
mouse.x=e.touches[0].pageX;
mouse.y=e.touches[0].pageY; }
}

盒子点击操作

     function mouseclick(e){
var index = $(e.target.parentNode.parentNode.parentNode).find(".over").index($(e.target));
switch(index){
case 0:
xd = 0;
yd = 0;
break;
case 1:
xd = -270;
yd = 0;
break;
case 2:
xd = -180;
yd = 0;
break;
case 3:
xd = -90;
yd = 0;
break;
case 4:
xd = 0;
yd = -90;
break;
case 5:
xd = 0;
yd = 90;
break;
default:;
}
outFrame = e.target.parentNode.parentNode.getElementsByTagName("iframe")[index]; if($(outFrame).attr("loaded")=="0")
return; $(e.target).unbind();
mouse.x=null;
mouse.y=null;
canmove = false;
e.target.parentNode.parentNode.parentNode.style.zIndex="1000";
$("#grayDiv").remove();
$("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>"); e.target.parentNode.parentNode.style.transform = "rotateX("+yd+"deg) rotateY("+xd+"deg)";
$(outFrame).attr("loaded","0");
outFace = $(e.target).prev();
$(outFrame).appendTo("#grayDiv");
$(outFrame).attr("scrolling","auto");
outFrame.style.transform = "scale("+1+")";
$(outFrame).css("height",window.innerHeight+"px");
$(outFrame).css("width",window.innerWidth+"px");
e.target.parentNode.parentNode.parentNode.style.zIndex="2";
$("<div id='close' style='position:absolute;left:0;top:0;'>关闭</div>").appendTo("#grayDiv");
$("#close").click(function(e){
$(outFrame).insertBefore(outFace);
$(outFrame).attr("scrolling","no");
outFrame.style.transform = "scale("+targetWidth/1024+")";
$(outFrame).css("height",1024+"px");
$(outFrame).css("width",1024+"px");
outFrame = null;
outFace = null;
$("#grayDiv").remove();
});
}

---

css3 3D盒子代码参考:

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

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

---

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

[应用][js+css3]3D盒子导航[PC端][应用][js+css3]3D盒子导航[PC端][应用][js+css3]3D盒子导航[PC端][应用][js+css3]3D盒子导航[PC端]