协慌网

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

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

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

您必须将它们放在这样的一行上：

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

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

请记住，从右到左应用了多个 transform one line 指令。

这： 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>

我添加此答案不是因为它可能会有所帮助，而是因为它是对的。

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

我从谷歌搜索时发现的一些随机位置抓取了以下图像，该图像显示了旋转矩阵：

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

我找不到很好的翻译示例，因此假设我没记错 / 没错，翻译：

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

可以在 Wikipedia 上有关转换的文章以及Pragamatic CSS3 教程中找到更多信息，该文章对此进行了很好的解释。我发现的另一本解释任意旋转矩阵的指南是Egon Rath 关于矩阵的注释

当然，矩阵乘法在这 4x4 矩阵之间起作用，因此要执行旋转后再进行平移，可以制作适当的旋转矩阵，然后将其乘以平移矩阵。

这可以让您有更多的自由来使它正确无误，也将使任何人（包括您）在五分钟之内几乎完全不可能了解它的工作。

但是，您知道，它有效。

编辑：我刚刚意识到，我错过了提到它的最重要和最实际的用法，即通过 JavaScript 增量创建复杂的 3D 转换，这会使事情变得更有意义。

您还可以使用额外的标记层来应用多个变换，例如：

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

当使用 Java 脚本对元素进行动画转换时，这非常有用。