degree = degree / 180 * Math.PI;
var sinDeg = Math.sin(degree);
var cosDeg = Math.cos(degree);
//ie 滤镜旋转 回复到原来的位置 -2 减去 border 实现定点旋转
var orginW = target.clientWidth-2, orginH = target.clientHeight-2;
var W=Math.abs(sinDeg*orginH)+Math.abs(cosDeg*orginW);
var H=Math.abs(sinDeg*orginW)+Math.abs(cosDeg*orginH);
var marginLeft =fomatFloat(W-orginW,1)/2;
var marginTop =fomatFloat(H-orginH,1)/2;
target.style.marginLeft=-marginLeft+"px";
target.style.marginTop=-marginTop+"px";
target.style.filter = "progid:DXImageTransform.Microsoft.Matrix(" +
"M11=" + cosDeg + ",M12=" + (-sinDeg) + ",M21=" + sinDeg + ",M22=" + cosDeg + ",SizingMethod='auto expand')";
alert(offCx+"=中心点坐标="+offCy+"=="+offX+"***"+offY);
//向量法推出旋转后左顶点坐标
var x0 = offX-offCx;
var y0 = offY-offCy;
alert(Math.round(x0*cosDeg-y0*sinDeg)+"****"+Math.round(x0*sinDeg+y0*cosDeg));
var x1 = Math.round(x0*cosDeg-y0*sinDeg)+offCx;
var y1 = Math.round(x0*sinDeg+y0*cosDeg)+offCy;
alert(x1+"````"+y1);
(x1,y1)推出的新的坐标
实现效果:
让div按照中心点旋转,实现和css3效果一样。由于ie滤镜旋转,是矩阵旋转,旋转后中心点随之改变,所以解决的方案就是位置复原,把它恢复到最初的位置。
orginH是最初的元素 宽和高;W和H是旋转后的宽和高利用三角函数求得;算图形的偏移量(增量的一半,旋转后的宽高和旋转前的宽高的差),marginLeft 和marginTop ,然后在付给这个元素,这样实现了绕中心点旋转。利用向量法推出新坐标
下面新坐标是为了把div内容和背景拼在一起,所以算出这个坐标确定他在背景上的确切位置
注:已知,初始的左顶点坐标和中心点坐标,还有一个旋转角度,这三个条件很重要