我们都知道h5可以做出很多很炫的效果，主要就看我们怎么玩了。下面就展示一些3D立方体的实现代码；
css样式
#box{ width:200px; height:200px; margin:100px auto; transform:perspective(1200px) rotateY(-60deg) rotateX(30deg); position:relative;
transform-style:preserve-3d;
transition:1s all ease-out;
}
#box div{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; line-height:200px; font-size:100px; color:#fff; opacity:0.5;}
#box div.front{ background:red; transform:translateZ(100px)}
#box div.back{ background:#3C0; transform:translateZ(-100px)}
#box div.left{ background:pink; transform:translateX(-100px) rotateY(90deg)}
#box div.right{ background:#3FC; transform:translateX(100px) rotateY(90deg)}
#box div.top{ background:#F0F; transform:translateY(-100px) rotateX(-90deg);}
#box div.bottom{ background:#000; transform:translateY(100px) rotateX(-90deg);}
#box:active{
transform:perspective(1200px) rotateY(360deg) rotateX(360deg);js代码
window.onload=function(){
var oBox=document.getElementById('box');
var y=-60;
var x=30;
document.onmousedown=function(ev){
var disX=ev.clientX-y;
var disY=ev.clientY-x;
document.onmousemove=function(ev){
y=ev.clientX-disX;
x=ev.clientY-disY;
oBox.style.transform='perspective(1200px) rotateY('+y+'deg) rotateX('+x+'deg)';
}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
}
return false;
}
}html代码
<body> <div id="box"> <div class="front">前</div> <div class="back">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="bottom">下</div> </div> </body>
