这个只是js部分,可以借鉴一下,用的是jquery,如果用心看的话是一定可以看的懂得~~~~
var box1,nx=180,rotXINT,xtop;
var PI = Math.PI;
function onBind(){
$('body').on('click','.box',function(){
var a = $(this).next().css('top');
if( a == '0px' ){
$(this).css('border-bottom','1px solid #D1D2D1');
$(this).css('box-shadow','0 4px 2px rgba(0, 0, 0, .05)');
$(this).next().css('border-top','1px solid #D1D2D1');
nx = 0;
}else{
$(this).css('border-bottom',0);
$(this).css('box-shadow','');
$(this).next().css('border-top',0);
nx = -90;
};
box1 = $(this).next();
clearInterval(rotXINT);
rotXINT=setInterval("startXRotate()",1);
});
};
function startXRotate(){
nx = nx + 1;
//旋转角度
var degx = "rotateX(" + nx + "deg)";
box1.css('transform',degx);
box1.css('webkitTransform',degx);
box1.css('OTransform',degx);
box1.css('MozTransform',degx);
//两种拼凑起来才是完整的
var angle = 2 * PI / 360 * nx;
xtop = Math.cos(angle) * 120 - 120;
var xtoppx = xtop + 'px';
box1.css('margin-top',xtoppx);
var xelse = 60 - Math.cos(angle) * 60;
var xelsepx = xelse + 'px';
box1.css('top',xelsepx);
if (nx==0 || nx>=90){
clearInterval(rotXINT);
};
};