jquery写的90度翻转

 

这个只是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);
        };
};