css3-transform-matrix 即矩阵实现物体旋转、缩放、移动效果

        我想做个模拟地毯展开的动画效果，其侧面的圆卷要由大随着地毯展开而逐渐变小，并在此过程中需要滚动（旋转）；一开始在网上搜了旋转的代码，很简单的一个方法是利用 jQuery 的插件 jQueryRotate.2.2.js（其中一个版本），然后直接在 js 调用其中已经封装好的 Rotate(deg) 即可实现物体旋转的效果，结果当我为该物体加上 jQuery 的 animation 动画让其产生位置的改变动画时却发现未能起作用，不知道是浏览器的兼容问题还是本身就不行，所以只能继续百度搜索其它方法，发现 css3-transform-matrix 有多个参数可以设置缩放，旋转和平移的效果，具体代码如下：

var $css3Transform = function(element, v) {
    //兼容多个浏览器。
    var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;
    for (var i=0; i < length; ++i) 
    {  
	  element.style[arrPriex[i] + "Transform"] = v;  
    }
};

var rotate = function() {//自转
if(flag==0){//用来标记只能获取一次不然会溢出(因为多次调用了此函数)。
      $ = function(selector) {
        return document.querySelector(selector);
      };
      sodRollCap = $("#sodRollCap"); //获取存放了图片的 div.
}
   flag = 1;
   
   if (sodRollCap){
		 rotateValue = (rotateValue+2)%361