ie 滤镜旋转 div 实现css3的效果

         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内容和背景拼在一起,所以算出这个坐标确定他在背景上的确切位置
注:已知,初始的左顶点坐标和中心点坐标,还有一个旋转角度,这三个条件很重要
 
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值