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

编程技术  /  houtizong 发布于 3年前   66

项目需要用脚本跨浏览器的实现把一个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]