CSS3转换顺序重要:最先操作

前端之家收集整理的这篇文章主要介绍了CSS3转换顺序重要:最先操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我们使用CSS3变换:operation1(…)operation2(…),哪一个先做?

第一个操作完成似乎是最右边的操作,即这里的operation2在操作前完成1。只要确定,是真的吗?

注意:我在某些地方阅读了一件事情和相反的内容(答案,互联网上的文章),因此就是这个问题。

解决方法

是的,第一个操作是最右边的操作,即这里的operation2在操作前完成1。

这是文档:http://www.w3.org/TR/css-transforms-1/,但我还没有找到关于这个段落。

实施例1

这里首先完成缩放,然后直接翻译100px(如果翻译首先完成,则缩放将使翻译成500px!)

  1. #container {
  2. position: absolute;
  3. transform: translate(0,100px) scale(5);
  4. transform-origin: 0 0; }
  1. <div id="container"><img src="http://gget.it/6fb0n028/pixelgrid.jpg"></img></div>

实施例2

这里翻译首先完成,然后缩放(缩放完成后,使翻译看起来像一个500px的翻译!)

  1. #container {
  2. position: absolute;
  3. transform: scale(5) translate(0,100px);
  4. transform-origin: 0 0; }
  1. <div id="container"><img src="http://gget.it/6fb0n028/pixelgrid.jpg"></img></div>

猜你在找的CSS相关文章