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