效果是出来了，但是3d旋转的效果并不逼真，因为转的时候没有阴影，有什么好的方法能让cube转的时候有明显的明暗效果呢？
做个立方体出来就逼真了。。。
阴影的话因为毕竟不是真的3d...所以只能勉强在地下铺一个不会变化的阴影，动态阴影就别想了。。。
除非线性代数和立体几何学究天人能换算个3d到2d的阴影投影公式，再用canvas画出来。。。
下面是本人的3d盒子（没做阴影）。。。仅供参考。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D CUBE</title>
<link href="css/clear.css" rel="stylesheet" type="text/css" media="all" />
<style>
html,body{width:100%; height:100%; perspective: 400px; perspective-origin: 50% 50%;}
#central_helper{position: absolute; left: 50%; top: 50%;}
.cube{
position: relative;
left: -100px;
top: -100px;
height: 200px;
width: 200px;
/*margin-left: -100px;
margin-top: -100px;*/ /*使用margin虽然能够定位到屏幕正中心，但是对于3d变换无效(top部分的偏移量没有消除）*/
/*border: solid blue 2px;*/ /*参考框*/
cursor: move;
/*background: rgba(0,0,125,0.2);*/ /*参考平面*/
transform-style: preserve-3d;
transition: transform 0.1s linear;
/*transform: rotateX(-45deg) rotateY(45deg) scale3d(1.0,1.0,1.0);*/
}
/*.cube:hover{
transform: scale3d(2.0,2.0,2.0);
}*/
.cube>div{
position: absolute;
left: 50px;
top: 50px;
height: 100px;
width: 100px;
background: orange;
border: solid black 1px;
box-sizing: border-box;
text-align: center;
line-height: 100px;
}
.cube_top{transform: rotateX(90deg) translateZ(52px);}
.cube_front{transform: rotateX(0deg) translateZ(52px);}
.cube_bottom{transform: rotateX(-90deg) translateZ(52px);}
.cube_back{transform: rotateX(180deg) translateZ(52px);}
.cube_left{transform: rotateY(-90deg) translateZ(52px);}
.cube_right{transform: rotateY(90deg) translateZ(52px);}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
window.onload=function(){
var cube=$('.cube').get(0);
var screenw=$(window).width();
var screenh=$(window).height();
var IS_MOUSE_ON=false;
$(window).mousemove(function(ev){
var ydeg=Math.round((ev.pageX/screenw-0.5)*720.0)+'deg';
var xdeg=Math.round((0.5-ev.pageY/screenh)*720.0)+'deg';
cube.style.transform='rotateX('+xdeg+') rotateY('+ydeg+')';
document.title='('+xdeg+','+ydeg+')';
if(IS_MOUSE_ON){
cube.style.transform+='scale3d(2.0,2.0,2.0)';
}
});
$(window).mousedown(function(){
IS_MOUSE_ON=true;
});
$(window).mouseup(function(){
IS_MOUSE_ON=false;
});
}
</script>
</head>
<body>
<div id="central_helper">
<section>
<div>上</div>
<div>前</div>
<div>下</div>
<div>背</div>
<div>左</div>
<div>右</div>
</section>
</div>
</body>
</html>