元素中心旋转在CSS3和IE滤镜中的实现
来源:互联网 发布:it技术博客 知乎 编辑:程序博客网 时间:2024/05/16 11:39
中心旋转在CSS3中是很容易实现的,CSS3有提供一个rotate方法,直接使用它即可。
这个rotate就一个角度的参数,我就不多说什么了,我们着重说关键的IE。IE中没有提供rotate这个方法,必须用构造旋转矩阵去变换,如果不知道那是个啥,最好去看看线性代数。不过看下面图片应就能明白它的基本原理。
假如红色的矩形是我们需要旋转的元素,蓝色矩形是旋转之后的位置,也就是说(0,1)和(1,0)这两个坐标旋转a角之后变成了(x,y)和(m,-n),我们只要知道他们的变换关系就好。那么(x,y)和(m,-n)可以用简单的三角函数算出得到(sin(a),cos(a))和(cos(a),-sin(a))。把这个结果代入单位矩阵中得到{ m-n} xy 也就是{ cos(a)-sin(a)} sin(a)cos(a) 假如a是45°就可以得到如下值。{ 0.707-0.707} 0.7070.707 我们把这个值用在IE的Matrix滤镜上
看吧,旋转已经生效了。滤镜中的SizingMethod这个参数的值是'auto expand'是为了让变换后的内容不局限于原理的区域大小如果不设置这个属性,超出原区域的东西会被剪掉,所以做旋转效果这个是必要的。
虽然是已经可以旋转了,但是还没完。把这个效果和CSS3的效果对比下就知道,这个旋转了以后中心点会根据实际大小到处跑,所以我们要添加个偏移量来固定这个中心点。我们先要计算出它旋转后的大小,然后就能知道它旋转后大小的增量,偏移量就是这个增量的一半。
W和H的值根据初等数学就能计算出来,W=|sin(a)*h|+|cos(a)*w|,H=|sin(a)*w|+|cos(a)*h|。我们的这个元素宽度高度是100,那么旋转后的宽度高度就是141.4,增量是41.4,偏移量就是20.7。我们可以用margin负值来让元素移动到这个偏移量的位置。
这样旋转才算是真正完成。
<!DOCTYPE>
<style>
div {
width:100px;height:100px;text-align:center;
font:14px/100px 微软雅黑;color:#000;
background:#CCF;
/*CSS3旋转*/
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
</style>
<div>次碳酸钴</div>
这个rotate就一个角度的参数,我就不多说什么了,我们着重说关键的IE。IE中没有提供rotate这个方法,必须用构造旋转矩阵去变换,如果不知道那是个啥,最好去看看线性代数。不过看下面图片应就能明白它的基本原理。
假如红色的矩形是我们需要旋转的元素,蓝色矩形是旋转之后的位置,也就是说(0,1)和(1,0)这两个坐标旋转a角之后变成了(x,y)和(m,-n),我们只要知道他们的变换关系就好。那么(x,y)和(m,-n)可以用简单的三角函数算出得到(sin(a),cos(a))和(cos(a),-sin(a))。把这个结果代入单位矩阵中得到
<!DOCTYPE>
<style>
div {
width:100px;height:100px;text-align:center;
font:14px/100px 微软雅黑;color:#000;
background:#CCF;
/*IE滤镜旋转*/
filter:progid:DXImagetransform.Microsoft.Matrix(
M11=0.707,M12=-0.707,
M21=0.707,M22=0.707,
SizingMethod='auto expand'
);
}
</style>
<div>次碳酸钴</div>
看吧,旋转已经生效了。滤镜中的SizingMethod这个参数的值是'auto expand'是为了让变换后的内容不局限于原理的区域大小如果不设置这个属性,超出原区域的东西会被剪掉,所以做旋转效果这个是必要的。
虽然是已经可以旋转了,但是还没完。把这个效果和CSS3的效果对比下就知道,这个旋转了以后中心点会根据实际大小到处跑,所以我们要添加个偏移量来固定这个中心点。我们先要计算出它旋转后的大小,然后就能知道它旋转后大小的增量,偏移量就是这个增量的一半。
W和H的值根据初等数学就能计算出来,W=|sin(a)*h|+|cos(a)*w|,H=|sin(a)*w|+|cos(a)*h|。我们的这个元素宽度高度是100,那么旋转后的宽度高度就是141.4,增量是41.4,偏移量就是20.7。我们可以用margin负值来让元素移动到这个偏移量的位置。
<!DOCTYPE>
<style>
div {
width:100px;height:100px;text-align:center;
font:14px/100px 微软雅黑;color:#000;
background:#CCF;
/*IE滤镜旋转*/
margin:-20.7px;
filter:progid:DXImagetransform.Microsoft.Matrix(
M11=0.707,M12=-0.707,
M21=0.707,M22=0.707,
SizingMethod='auto expand'
);
}
</style>
<div>次碳酸钴</div>
这样旋转才算是真正完成。
0 0
- 元素中心旋转在CSS3和IE滤镜中的实现
- 元素中心旋转在CSS3和IE滤镜中的实现
- ie 滤镜旋转 div 实现css3的效果
- CSS3 transform旋转属性在IE浏览器里的实现
- IE 滤镜实现图片旋转效果
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
- 元素绕中心旋转
- ie 滤镜 向量旋转公式:
- css3中的滤镜效果
- css3中的滤镜特效
- ie css3兼容方法之 ie 滤镜
- 计算IE的旋转角度与滤镜
- IE滤镜包括旋转角度、渐变
- QGraphicItem实现中心旋转
- QGraphicItem实现中心旋转
- 免费pdf转换成Excel转换器下载
- redis 札记
- C语言基础之32个关键字
- QT ubuntu 中文输入问题
- POJ 1988 Cube Stacking
- 元素中心旋转在CSS3和IE滤镜中的实现
- 译《Understanding Weak References》
- ORA-01511: error in renaming log/data files
- 「RV SHOW 国际房车展」(2014中国国际房车及露营用品展览会)
- 一些框架的设计套路
- 在DOS下的java聊天小程序--基于UDP传输方式
- String-lastIndexOf()、replace()简单使用
- js的for循环
- 提示框第三方库之MBProgressHUD