元素中心旋转在CSS3和IE滤镜中的实现
2014-07-16 10:10
567 查看
中心旋转在CSS3中是很容易实现的,CSS3有提供一个rotate方法,直接使用它即可。
![](http://www.web-tinker.com/pictures/39d76ddc7b2ec5e7e680cecbdda47a97.png)
这个rotate就一个角度的参数,我就不多说什么了,我们着重说关键的IE。IE中没有提供rotate这个方法,必须用构造旋转矩阵去变换,如果不知道那是个啥,最好去看看线性代数。不过看下面图片应就能明白它的基本原理。
![](http://www.web-tinker.com/pictures/5b16815a8c72666e865a91558ab4faf0.png)
假如红色的矩形是我们需要旋转的元素,蓝色矩形是旋转之后的位置,也就是说(0,1)和(1,0)这两个坐标旋转a角之后变成了(x,y)和(m,-n),我们只要知道他们的变换关系就好。那么(x,y)和(m,-n)可以用简单的三角函数算出得到(sin(a),cos(a))和(cos(a),-sin(a))。把这个结果代入单位矩阵中得到
也就是
假如a是45°就可以得到如下值。
我们把这个值用在IE的Matrix滤镜上
![](http://www.web-tinker.com/pictures/25421d059f10e164a3963c024e2601ac.png)
看吧,旋转已经生效了。滤镜中的SizingMethod这个参数的值是'auto expand'是为了让变换后的内容不局限于原理的区域大小如果不设置这个属性,超出原区域的东西会被剪掉,所以做旋转效果这个是必要的。
虽然是已经可以旋转了,但是还没完。把这个效果和CSS3的效果对比下就知道,这个旋转了以后中心点会根据实际大小到处跑,所以我们要添加个偏移量来固定这个中心点。我们先要计算出它旋转后的大小,然后就能知道它旋转后大小的增量,偏移量就是这个增量的一半。
![](http://www.web-tinker.com/pictures/379e8ca6420397f9000495413f3b9f59.png)
W和H的值根据初等数学就能计算出来,W=|sin(a)*h|+|cos(a)*w|,H=|sin(a)*w|+|cos(a)*h|。我们的这个元素宽度高度是100,那么旋转后的宽度高度就是141.4,增量是41.4,偏移量就是20.7。我们可以用margin负值来让元素移动到这个偏移量的位置。
![](http://www.web-tinker.com/pictures/8bd0b0ed71b6a67be34fe319095f5ef3.png)
这样旋转才算是真正完成。
<!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>
![](http://www.web-tinker.com/pictures/39d76ddc7b2ec5e7e680cecbdda47a97.png)
这个rotate就一个角度的参数,我就不多说什么了,我们着重说关键的IE。IE中没有提供rotate这个方法,必须用构造旋转矩阵去变换,如果不知道那是个啥,最好去看看线性代数。不过看下面图片应就能明白它的基本原理。
![](http://www.web-tinker.com/pictures/5b16815a8c72666e865a91558ab4faf0.png)
假如红色的矩形是我们需要旋转的元素,蓝色矩形是旋转之后的位置,也就是说(0,1)和(1,0)这两个坐标旋转a角之后变成了(x,y)和(m,-n),我们只要知道他们的变换关系就好。那么(x,y)和(m,-n)可以用简单的三角函数算出得到(sin(a),cos(a))和(cos(a),-sin(a))。把这个结果代入单位矩阵中得到
{ | m | -n | } |
---|---|---|---|
x | y |
{ | cos(a) | -sin(a) | } |
---|---|---|---|
sin(a) | cos(a) |
{ | 0.707 | -0.707 | } |
---|---|---|---|
0.707 | 0.707 |
<!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>
![](http://www.web-tinker.com/pictures/25421d059f10e164a3963c024e2601ac.png)
看吧,旋转已经生效了。滤镜中的SizingMethod这个参数的值是'auto expand'是为了让变换后的内容不局限于原理的区域大小如果不设置这个属性,超出原区域的东西会被剪掉,所以做旋转效果这个是必要的。
虽然是已经可以旋转了,但是还没完。把这个效果和CSS3的效果对比下就知道,这个旋转了以后中心点会根据实际大小到处跑,所以我们要添加个偏移量来固定这个中心点。我们先要计算出它旋转后的大小,然后就能知道它旋转后大小的增量,偏移量就是这个增量的一半。
![](http://www.web-tinker.com/pictures/379e8ca6420397f9000495413f3b9f59.png)
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>
![](http://www.web-tinker.com/pictures/8bd0b0ed71b6a67be34fe319095f5ef3.png)
这样旋转才算是真正完成。
相关文章推荐
- 元素中心旋转在CSS3和IE滤镜中的实现
- 元素中心旋转在CSS3和IE滤镜中的实现
- ie 滤镜旋转 div 实现css3的效果
- IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3
- 用IE滤镜实现多种常用的CSS3效果
- 使用CSS3配合IE滤镜实现渐变和投影的效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- IE 滤镜实现图片旋转效果
- 滤镜帮助IE实现部分CSS3效果整理
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
- Chrome下 css3实现的圆角 无法hidden其中的元素
- IE滤镜与CSS3效果
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- 将一个5*5的矩阵中最大的元素放在中心,四个角分别放四个最小的元素(顺序从左到右,从上到下顺序依次从小到大存放),写一个函数实现之。用main函数调用。
- 用IE滤镜实现的一些特效
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- css3实现旋转小三角动画