Jquery使用animate实现css3的transform动画效果

首先，Jquery并不支持在animate的样式中的transform效果，这里通过使用animate的回调函数来实现。

<div id="div" style="width: 200px;height: 200px;border: 1px solid red; transition: all 2s"></div>

 

$("#div").animate({},function(){                                       
    //第一个花括号里面是动画内容，可以为空，但不能省去中括号

    $("#div").css({'width':'300px','height':'300px','transform':'rotate(180deg)'});                                  
    //在回调函数里面改变css属性来实现transform中的动画变换 

})

ps:在同时使用多个transform属性时，用空格符隔开多个属性值，如：

transform:rotate(180deg) translate(200px);

注意：使用rotate旋转时，坐标轴也同时旋转相应的角度，所以假如需要同时使用rotae与其他变换时，一定要注意他们的先后顺序。