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

Question

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

示例：在下文中，仅应用了平移，而不应用了旋转。

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

原文由 Ben 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须像这样将它们放在一行中：

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

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

---

请记住 ，从右到左应用 多个变换一行指令。

这个： transform: scale(1,1.5) rotate(90deg);

和： transform: rotate(90deg) scale(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>

原文由 lukad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

除了使用现有的答案解释如何通过链接来进行多个翻译外，您还可以 自己构建 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 转换，这样事情会更有意义。

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议