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

小开

最佳答案

你必须像这样把它们放在一条线上：

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>

小开

您可以像这样应用多个转换：

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

小开

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

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

我从我在谷歌搜索时发现的某个网站抓取了以下图像，它显示了旋转矩阵：

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

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

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

在关于转型的维基百科文章和Pragamatic CSS3教程中查看更多信息，这很好地解释了它。我找到的另一个解释任意旋转矩阵的指南是埃贡·拉特关于矩阵的注记

矩阵乘法当然在这些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>

这在使用Javascript对具有转换的元素进行动画处理时非常有用。

小开

从那里开始，在css中，如果你重复2个或更多的值，总是最后一个被应用，除非使用!important标记，但同时尽可能避免使用!important，所以在你的情况下，这就是问题所在，所以第二个变换覆盖在这种情况下是第一个…

那么你怎么能做你想做的事呢？

不用担心，转换同时接受多个值…所以下面的代码可以工作：

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

如果您喜欢玩转换，请从下面的MDN运行ifram：

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

Look at the link below for more info:

<< CSS transform >>

小开

~~在未来的某个时候~~，（现在可用，请参阅下面的更新）我们可以这样写：

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

当在元素上应用单个类时，这将变得特别有用：

<div class="teaser important"></div>
.teaser{rotate:10deg;}.important{scale:1.5 1.5;}

此语法在正在进行的CSS转换2级规范中定义，但找不到有关当前浏览器支持的任何信息，除了chrome canary。希望有一天我会回来在这里更新浏览器支持；）

在这篇文章中找到了您可能想要查看有关当前浏览器解决方法的信息。

更新：功能已登陆Firefox 72

更新：现在可以在chrome 104，Edge 104，Safari 14.1中使用，请参阅https://web.dev/css-individual-transform-properties/#：~： text=support%20这些%20属性.-，浏览器%20 support，-%3A

小开

在单行css中转换旋转和翻译：如何？

div.className{transform : rotate(270deg) translate(-50%, 0);-webkit-transform: rotate(270deg) translate(-50%, -50%);-moz-transform: rotate(270deg) translate(-50%, -50%);-ms-transform: rotate(270deg) translate(-50%, -50%);-o-transform: rotate(270deg) translate(-50%, -50%);float:left;position:absolute;top:50%;left:50%;}

<html><head></head><body><div class="className"><span style="font-size:50px">A</span></div></body></html>

小开

我学到的教训。

如果您使用的是style的React css，请不要包含分号，即使是在它的末尾，因为它是由React自动和内部包含的。

就像：

style={transform: "rotate(90deg) scaleX(-1)",}

小开

这是一个古老的问题，但最近却与我非常相关。我发现“转换：矩阵（…）”更方便使用。因此，对于有问题的问题，下面的示例在x轴上应用~15deg旋转和20px向右平移（为了方便起见）。

.matrixTransform {transform-origin: top left;transform: matrix(0.965,0.258,-0.258,0.965,20,0);font-size: 30px;}.combinedTransform {transform-origin: top left;transform: rotate(15deg) translateX(20px);font-size: 30px;}

<div class=matrixTransform>A</div><div class=combinedTransform>B</div>

从我收集的信息来看，这个特定的转换使用初始4个参数来表示转换，例如缩放、旋转。并且似乎按列顺序排列。剩下的两个分别是x轴和y轴的平移。我发现Wolfram Alpha备忘单（计算器）非常有用。