元素中心旋转在CSS3和IE滤镜中的实现

最新推荐文章于 2024-04-28 19:31:20 发布

JhonXie

最新推荐文章于 2024-04-28 19:31:20 发布

阅读量162

点赞数

原文链接：https://my.oschina.net/sanji/blog/185550

版权

本文深入解析了在Internet Explorer浏览器中使用CSS滤镜实现元素旋转的原理和方法，包括构造旋转矩阵、计算旋转后元素的大小、调整中心点位置等步骤，并通过实例演示了如何在IE中实现CSS3旋转效果。文章还强调了在应用旋转效果时需要注意的细节，如滤镜中的SizingMethod属性和元素偏移量的计算。

摘要由CSDN通过智能技术生成

为什么80%的码农都做不了架构师？>>>

<!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))。把这个结果代入单位矩阵中得到

{	m	-n	}
x	y

　　也就是

{	cos(a)	-sin(a)	}
sin(a)	cos(a)

　　假如a是45°就可以得到如下值。

{	0.707	-0.707	}
0.707	0.707

　　我们把这个值用在IE的Matrix滤镜上

<!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>