20130725 js中的旋转

div的旋转花费了我一整天

主要时间还是花费在IE8上面..IE8以上的都好好的....

IE8有个蛋疼的旋转中心的问题

var s1=String(s);
var m11=String(Math.cos(Math.PI/180*s));
var m12=String(-Math.sin(Math.PI/180*s));
var m21=String(Math.sin(Math.PI/180*s));
var m22=m11;
		
			
var the_s="-moz-transform: rotate("+s1+"deg);\
    filter:progid:DXImageTransform.Microsoft.Matrix(M11="+m11+",M12="+m12+",M21="+m21+",M22="+m22+",SizingMethod='auto expand');\
    -ms-filter:progid:DXImageTransform.Microsoft.Matrix(M11="+m11+",M12="+m12+",M21="+m21+",M22="+m22+",SizingMethod='auto expand');\
    -webkit-transform: rotate("+s1+"deg);\
    -o-transform: rotate("+s1+"deg);\
    -ms-transform: rotate("+s1+"deg);\
    transform: rotate("+s1+"deg);";
var the_style=this._innerObj.style.cssText;
the_style+=the_s;
aaaaaaaa.style.cssText=the_style;

大概代码就这样...通过不停地"刷新"dom对象的cssText

这样实现了一个动画的过程

到了IE8之后..旋转的中心就不是div的中心了

而是div的左上角

为此蛋碎了一天..

尝试通过三角函数之类的去定位div回到应该中心点上..

才发现自己傻X了

原来IE8在旋转div的时候,div的长宽也相应地改变了

然后不根本就不用三角函数就能够定好中心位置了..

唉..下个学期就大三了.....