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

当我们使用CSS3变换：operation1(…)operation2(…)，哪一个先做？

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

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

解决方法

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

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

实施例1

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

#container { 
  	position: absolute; 
  	transform: translate(0,100px) scale(5); 
  	transform-origin: 0 0; }

<div id="container"><img src="http://gget.it/6fb0n028/pixelgrid.jpg"></img></div>

实施例2

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

#container { 
  	position: absolute; 
  	transform: scale(5) translate(0,100px); 
  	transform-origin: 0 0; }

<div id="container"><img src="http://gget.it/6fb0n028/pixelgrid.jpg"></img></div>

原文地址：https://www.jb51.cc/css/218782.html