CSS3转换顺序事项：最右边的操作优先

当我们使用CSS3

转换：operation1（…）operation2（…）

时，哪一个先完成？

完成的第一个操作似乎是最右侧的操作，即此处

operation2

在

operation1

之前完成可以肯定的是，这是真的吗？

---

注意：我在一些地方读到了一件事，而在一些地方读到了相反的事情（答案、互联网上的文章），因此这里的问题是。

是的，第一次做的手术是最右边的一次，即这里的

手术2

是在

手术1

之前做的

这确实表明：

变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效应用

以下是文档：

---

例1 这里首先进行缩放，然后垂直平移100px（如果先进行平移，缩放将平移500px！）

#容器{
位置：绝对位置；
转换：转换（0100px）刻度（5）；
变换原点：0；}

---

执行从左到右的变换。变换对应于矩阵运算，这些运算从左到右执行

这背后有一种直觉，这不仅仅是规范中的规范规则（这里的第3点：）

这里有一支笔可以试一试：

说明：

每个变换步骤都建立自己的坐标系。所以

transform: translateX(500px);

沿其父元素的X轴建立一个新的坐标系500px，元素将在该坐标系中渲染

同样地

background-color: blue;
transform: translateX(500px) rotate(60deg);

首先沿其父对象的X轴（向右）建立一个新的坐标系500px，然后在该坐标系内（平移，但现在不相关）执行旋转。因此，它将是一个向右500px的形状，并在适当的位置旋转（围绕所谓的

变换原点

，在局部坐标系中进行解释，默认的50%50%表示旋转，围绕矩形中心旋转，但它是一个旁侧）

相反的顺序

background-color: orange;
transform: rotate(60deg) translateX(500px);

首先建立一个新的坐标系，该坐标系相对于父坐标系旋转60度，然后沿现在旋转的坐标系的X轴平移100px，从文档（或用户）的全局视点看，该方向实际上并不向右。因此，在本例中，就好像您首先旋转了纸张，然后沿着纸张的侧面滑动形状500个单位（从原点开始，在本例中是左上角）

对于更高级的讨论，以及对如何直观地理解两个方向的理解，请查看-CSS转换遵循后乘法模型，因此查找标题为“将转换视为转换局部坐标框架”的页面（尽管插图似乎有点不对劲）

---

其他答案和评论中也提到了这一点，但在我看来，强调不够：简短的答案是两种方法都是有效的

这一切取决于你是否考虑了你的坐标（元素从左到右）还是根据初始元素位置（右到左）固定到页面。 这里有一篇文章展示了动画的不同之处（这使它更容易理解）：

下面是一个片段，显示了文章中的动画：

html，正文{高度：100%；}
身体{
背景：#aaa；
颜色：#000；
字体系列：Calibri、Candara、Segoe、“Segoe UI”、Optima、Arial、无衬线字体；
溢出：隐藏；
保证金：0；
}
.info{
文本对齐：居中；
字体系列：Consoleas、摩纳哥、monospace；
字体大小：20px；
字体大小：粗体；
利润底部：4倍；
颜色：#fff；
}
.split{空白：nowrap；}
.这边{
显示：内联块；
宽度：50%；
}
.标签{
文本对齐：居中；
字体大小：20px；
}
.集装箱{
位置：相对位置；
字体大小：50px；
边距：.6em自动0；
宽度：0；高度：0；
转换：translateX（-1em）；
}
.ltr.对象{
位置：绝对位置；
左：0；上：0；
宽度：1米；高度：1米；
边距：0.5em-0.5em；
背景：rgb（114,34,34）；
动画：ltrObj 5s无限；
}
@关键帧ltrObj{
从，10%{变换：旋转（0deg）translateX（0em）；}
40%{变换：旋转（45度）translateX（0em）；}
70%，到{变换：旋转（45度）translateX（2米）；}
}
.object.shadow{
动画：无；
不透明度：.2；
}
.ltr.轴{
位置：绝对位置；
左：.5em；顶：.5em；
宽度：1米；高度：1米；
颜色：#111；
框大小：边框框；
左边框：2倍实心；
边框顶部：2倍实心；
}
.ltr.axes:：之前，.ltr.axes:：之后{
内容：''；
位置：绝对位置；
宽度：2米；高度：2米；
框大小：边框框；
左边框：2倍实心；
边框顶部：2倍实心；
变换原点：左上角；
}
.ltr.axes:：在{top:100%；left:0；margin left:-1px；margin top:1px；transform:rotate（225度）；}
.ltr.axes:：在{top:0；left:100%；边距top:-1px；边距left:1px；变换：旋转（135度）；}
.rtl.轴{
位置：绝对位置；
左：0；上：0；
宽度：2.5em；高度：2.3em；
颜色：#111；
框大小：边框框；
左边框：2倍实心；
边框顶部：2倍实心；
}
.rtl.axes:：之前，.rtl.axes:：之后{
内容：''；
位置：绝对位置；
宽度：2米；高度：2米；
框大小：边框框；
左边框：2倍实心；
边框顶部：2倍实心；
变换原点：左上角；
}
.rtl.axes:：在{top:100%；left:0；margin left:-1px；margin top:1px；transform:rotate（225度）；}
.rtl.axes:：在{top:0；left:100%；边距top:-1px；边距left:1px；变换：旋转（135度）；}
.rtl.object{
位置：绝对位置；
左：0；上：0；
宽度：1米；高度：1米；
边距：0.5em-0.5em；
背景：rgba（100,0,0,0.8）；
动画：rtlObj 5s无限；
}