jquery 插件 animate 动画 transform transform2d transform3d
2D效果兼容好，部分效果兼容IE8，3D效果不能实现
我们平时引用jquery需要写类似的animate动画例如：
$('div').animate({"top":"10px"})
像这样简单的动画jquery可以支持，但是遇到css3的动画属性就不工作了
$('div').animate({"transform":"rotate(45deg)"}) //无效
之前有介绍过扩展这类似插件的文章《取代jQuery animate的transit.min.js》发现动画上有点不流畅和兼容性不太好而且还需要自定的动画名称例如：
$("#box").transition({ opacity: 0.1, scale: 0.3 });
//不是使用我们平时用惯的animate()
还介绍了一款更强劲的插件文章写过《velocity.js中文手册 velocity取代jQuery animate()的插件》这款插件太适用，但对于做一些简单的css3动画属性使用Velocity.js有点大题小做了，在说也不是我们平时使用的animate()去写。
这里真正介绍是一款基于jquery方法animate()去扩展的插件jquery.transform2d.js，写法：
2D:
$elem.css("transform", "rotate(45deg)");
$elem.css("transform", "skewX(30deg) skewY(10deg)");
$elem.css("transform", "scale(2, .5)");
$elem.css("transform", "translate(100px, 10px)");
$elem.css("transform", "matrix(.5, .433, -.5, 1.033, 50, -10)");
$elem.css("transform", "rotate(45deg) translate(38px)");
$elem.css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");
$elem.animate({"transform": "rotate(45deg)"});
$elem.animate({"transform": "scale(.5,1)"});
$elem.animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}");
3D （3D跟2D区别就是3D多了Z坐标轴）
$elem.css("transform", "rotateZ(45deg)");
https://github.com/louisremi/jquery.transform.js/