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

项目原因需要把一个DOM结点做任意角度的旋转,在现代浏览器中通过css3的transform属性可以轻松实现,但是在IE中却必须使用传说中的Matrix Filter(http://msdn.microsoft.com/zh-cn/library/ms533014(v=VS.85).aspx),
复杂的变换矩阵计算不说,而且通过线性变换实现的旋转只能是绕原点!
为了能让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 function(dom, angle) {
			var rad = angle * (Math.PI / 180),
			dx = (1 - Math.cos(Math.PI / 4 + rad) / Math.cos(Math.PI / 4)) * dom.offsetWidth / 2,
			dy = (1 - Math.sin(Math.PI / 4 + rad) / Math.cos(Math.PI / 4)) * dom.offsetHeight / 2,
			m11 = Math.cos(rad),
			m12 = -1 * Math.sin(rad),
			m21 = Math.sin(rad),
			m22 = m11;
			if (!dom.style.Transform) {
				dom.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(Dx=' + dx + ',Dy=' + dy + ',M11=' + m11 + ',M12=' + m12 + ',M21=' + m21 + ',M22=' + m22 + ',SizingMethod="original")';
			} else if (UA.ie == 9) {
				dom.style.MsTransform = 'rotate(' + angle + 'deg)';
			} else {
				dom.style.Transform = '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);

更详细的说明请联系 ck0123456@gmail.com