项目需要用脚本跨浏览器的实现把一个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);
更详细的说明请联系
ck0123456@gmail.com
分享到:
相关推荐
transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如: transform: scale(1.2); 换成: transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移...
主要使用和淘宝、小米和京东类似的CSS3 translateX移动达到轮播图丝滑般翻页~
tween-css-transform 使用 CSS matrix3d()和 4x4 矩阵插值(分解/重组)对 DOM 元素进行matrix3d() 。 这允许平滑范围的 3D 旋转(使用四元数和球面插值)而无需万向节锁定。 通常与或。 例子: var tweenr = ...
#st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2{ -webkit-animation:moveDown 0.6s ease-in-out ...
css3 transform 3D 图片旋转木马
在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3前缀使用介绍,我们...
这是一个通过使用css完成的一个立方体的构建,希望对于刚刚接触css的人有所帮助。要注意旋转时轴也会跟着旋转,所以要看是先旋转还是先位移,根据具体情况具体分析。 transform-style:preserve-3d; 让该元素里面的子...
纯CSS实现鼠标经过3D立体动态展示图片特效代码 <link type="text/css" href="css/style.css" rel="stylesheet" /> @charset "utf-8"; *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100...
CSS3中的transform:rotate()可以实现旋转功能 transition: all 2.0s;表示所有的属性变换在2秒内完成; transform: rotate(360deg);表示图片旋转360度。 参考文档: ...
下面分享一下这款HTML5 Loading动画的实现过程,主要是HTML代码和CSS3代码,以及初始化的JS代码。 首先是HTML代码,只定义一个Loading容器,非常简单。 ”hold”> 接下来是CSS代码,主要是定义每一个圆圈的动画效果...
纯css3 transform制作带指针偏移Safari指南针动
纯css3 transform文字变形3D阴影效果代码 纯css3 transform文字变形3D阴影效果代码
昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。 只锁头效果很好,IE11下会小抖,但chrome下很稳定停在那里。后来又加上锁定列,发现列会盖住表头。 百度到这里《小心 CSS3 Transform 引起的 z-...
IE 中支持的变换属性:所有 2d 和 3d 变换,但是 3d 旋转(rotateX、rotateY)看起来不正确,因为没有透视变换。 用法 var applyTransform = require ( 'ie-css-transform' ) ; var el = document . createElement...
操作:代码注释写的很详细,很容易就明白,对vue3不熟悉的小伙伴更加友好,将...PS:对于使用transform实现可视化大屏自适应方案,需要注意在缩放过程中内容区域的图片像素是否达标,否则会出现图片缩放后模糊的情况。
transform v0.0.8css3 transform for ietransform是一个为IE6-8提供css3 transform属性功能的js库,它的使用非常简单transform is a provider of css3 js library functions transform property for IE6-8, it's ...
使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 这个听...
css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码。
它对于在支持 CSS 转换但不支持 CSS 转换(例如 IE9)的浏览器上为 CSS 转换属性设置动画特别有用。 它可以处理任何单值 2D/3D CSS 转换函数(IE9 不支持 3D 转换),即: 2D 变换: translateX 、 translateY 、 ...
CSS3转换函数游乐场。 使用 , 和构建的演示UI。 通过部署 发展历程 —安装 克隆或存储库并安装依赖项 $ git clone https://github.com/alterebro/css-transform.git $ cd css-transform/ $ npm install —服务 ...