Web 技术研究所

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

CSS3 tranform 的执行顺序

  CSS3的transform属性可以同时使用多个变换。变换就是矩阵乘法,是不满足交换律的东西,它们的顺序很重要。在CSS3中,这些变换将被以书写顺序从右到左逐个作用到元素上。相当对元素外嵌套元素,然后对这些元素分别设置变换,让嵌套元素上的变换自然叠加。
  比如平移和旋转这两种变换,先平移后旋转和先旋转后平移将得到不同的结果。比如下面这个代码:
<!DOCTYPE html>
<style>
div {
  position:absolute;
  left:0px;top:0px;
  width:100px;height:100px;
}
#a {
  background:red;
  transform:translate(100px,100px) rotate(45deg);
}
#b {
  background:green;
  transform:rotate(45deg) translate(100px,100px);
}
</style>
<div id="a"></div>
<div id="b"></div>
  #a元素是先旋转后平移,而#b元素是先平移后旋转,所以他们的最终结果不同。其实像上面这样有多个变换存在的情况可以分解为元素嵌套: <!DOCTYPE html>
<style>
div {
  position:absolute;
  left:0px;top:0px;
  width:100px;height:100px;
}
#a1 {transform:translate(100px,100px);}
#a2 {transform:rotate(45deg);background:red;}
#b1 {transform:rotate(45deg);}
#b2 {transform:translate(100px,100px);background:green;}
</style>
<div id="a1">
  <div id="a2"></div>
</div>
<div id="b1">
  <div id="b2"></div>
</div>
  这个代码可以得到和前面一样的效果,执行顺序是由内而外的。如果是从前面的写法变换过来的话,应该把最后面的变换写在最内层的元素中,它会最先被处理。其实,把变换拆开也有拆开的好处,这样可以让多个元素先做自己的变换,最后再应用上同一组变换,省去了逐个元素设置完整变化过程的麻烦。不过这个顺序问题应该属于常识了,这只是一篇扫盲文而已。
网名:
54.162.169.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^