如何在 CSS 中应用多重变换？

Question

使用CSS，如何应用多个transform？

示例：下面仅应用平移，不应用旋转。

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Answer 1

我添加这个答案不是因为它可能有帮助，而是因为它是真实的。

除了使用现有答案解释如何通过链接进行多个翻译之外，您还可以 自己构建 4x4 矩阵

我从我在谷歌搜索时发现的一些随机站点显示了旋转矩阵：

绕 x 轴旋转：
绕 y 轴旋转：
绕 z 轴旋转：

我找不到很好的翻译示例，所以假设我记得/理解正确，翻译：

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

请参阅有关转换的维基百科文章以及Pragamatic CSS3 教程 很好地解释了这一点。我发现的另一个解释任意旋转矩阵的指南是 Egon Rath 关于矩阵的笔记

当然，这些 4x4 矩阵之间可以进行矩阵乘法，因此要执行旋转和平移，您需要创建适当的旋转矩阵并将其乘以平移矩阵。

这可以给你更多的自由来让它恰到好处，并且也使得任何人都几乎完全不可能理解它在做什么，包括五分钟内的你。

但是，你知道，它确实有效。

编辑：我刚刚意识到我错过了可能最重要和最实际的用途，即通过 JavaScript 逐步创建复杂的 3D 转换，这样事情会变得更有意义。

Answer 2

你必须将它们放在一行上，如下所示：

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

当您有多个转换指令时，仅应用最后一个。就像任何其他 CSS 规则一样。

---

请记住，多个转换一行指令是从右向左应用。

这个：变换：scale(1,1.5)rotate(90deg);
和：变换：旋转(90deg)缩放(1,1.5);

将不会产生相同的结果：

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>