Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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

  中心旋转在CSS3中是很容易实现的,CSS3有提供一个rotate方法,直接使用它即可。
<!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 }
xy
  也就是
{ cos(a)-sin(a) }
sin(a)cos(a)
  假如a是45°就可以得到如下值。
{ 0.707-0.707 }
0.7070.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>

  这样旋转才算是真正完成。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^