现代浏览器中CSS3的transform:rotate在IE中的实现

项目需要用脚本跨浏览器的实现把一个DOM结点做任意角度的旋转
在现代浏览器中通过css3的transform属性可以轻松实现
但是在IE中却必须使用传说中大神级的[url=http://msdn.microsoft.com/zh-cn/library/ms533014(v=VS.85).aspx]Matrix Filter[/url],
复杂的变换矩阵计算不说,而且通过线性变换实现的旋转只能是绕原点!
为了能让Matrix Filter也能像现代浏览器一样绕元素中心旋转,做了以下的计算:

// UA.core为浏览器核心,取值为trident,webkit,gecko,presto或undefined
// UA.ie为ie浏览器版本号,取值5,6,7,8,9...
// 如何判断浏览器本文不再描述,可以参考https://github.com/kissyteam/kissy/blob/master/src/ua/base.js
// 或者也可采用其他特征来区分浏览器
var rotate = (function() {
switch (UA.core) {
case 'trident' :
return UA.ie < 9 ? return function(dom, angle) {
var rad = angle * (Math.PI / 180),
filter = dom.filters.item('DXImageTransform.Microsoft.Matrix');
filter.Dx = (1 - Math.cos(Math.PI / 4 + rad) / Math.cos(Math.PI / 4)) * 0.5 * (dom.offsetWidth - 1);
filter.Dy = (1 - Math.sin(Math.PI / 4 + rad) / Math.cos(Math.PI / 4)) * 0.5 * (dom.offsetHeight - 1);
filter.M11 = Math.cos(rad);
filter.M12 = -1 * Math.sin(rad);
filter.M21 = Math.sin(rad);
filter.M22 = filter.M11;
filter.Enabled = true;
} : return function(dom, angle) {
dom.style.msTransform = 'rotate(' + angle + 'deg)';
};
case 'webkit' :
return function(dom, angle) {
dom.style.webkitTransform = 'rotate(' + angle + 'deg)';
};
case 'gecko' :
return function(dom, angle) {
dom.style.MozTransform = 'rotate(' + angle + 'deg)';
};
case 'presto' :
return function(dom, angle) {
dom.style.OTransform = 'rotate(' + angle + 'deg)';
};
default:
return function(dom, angle) {
dom.style.transform = 'rotate(' + angle + 'deg)';
};
}
})();

// 使用方法:
/**
* 跨浏览器绕中心旋转
* @param dom HTMLElement
* @param angle 旋转的角度(顺时针方向)
*/
rotate(dom, angle);


更详细的说明请联系 [url=mailto:ck0123456@gmail.com]ck0123456@gmail.com[/url]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值