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

阅读更多

项目需要用脚本跨浏览器的实现把一个DOM结点做任意角度的旋转
在现代浏览器中通过css3的transform属性可以轻松实现
但是在IE中却必须使用传说中大神级的 Matrix Filter,
复杂的变换矩阵计算不说,而且通过线性变换实现的旋转只能是绕原点!
为了能让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);

更详细的说明请联系 [email protected]