使用CSS，如何应用多个转换？
示例：在以下示例中，仅应用平移，而不应用旋转。
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
当前回答
可以像这样应用多个变换：
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
其他回答
可以像这样应用多个变换：
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
我学到的教训。
如果您使用的是样式的React css，请不要包含分号，即使是在它的末尾，因为它是由React自动内部包含的。
就像：
style={
transform: "rotate(90deg) scaleX(-1)",
}
从这里开始，在CSS中，若您重复2个或更多值，则始终应用最后一个值，除非使用！重要的标签，但同时避免使用！尽可能重要，所以在你的情况下这就是问题所在，所以在这种情况下，第二个变换会覆盖第一个变换。。。
那你怎么能做你想做的？。。。
别担心，转换同时接受多个值。。。因此，下面的代码将起作用：
li:nth-child(2) {
transform: rotate(15deg) translate(-20px, 0px); //multiple
}
如果您想玩变换，请从下面的MDN运行iframe：<iframe src=“https://interactive-examples.mdn.mozilla.net/pages/css/transform.html“class=”interactive“width=”100%“frameborder=”0“height=”250“></iframe>
查看下面的链接了解更多信息：
<<CSS转换>>
我加上这个答案并不是因为它可能有帮助，而是因为它是真的。
除了使用现有答案解释如何通过链接进行多个翻译之外，您还可以自己构建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转换，这样做会更有意义。
在单行css中转换旋转和平移：-如何？
div.className{变换：旋转（270度）平移（-50%，0）；-webkit转换：旋转（270度）平移（-50%，-50%）；-moz变换：旋转（270度）平移（-50%，-50%）；-ms变换：旋转（270度）平移（-50%，-50%）；-o变换：旋转（270度）平移（-50%，-50%）；浮动：左侧；位置：绝对；顶部：50%；左：50%；}<html><head></head><body><div class=“className”><span style=“font-size:50px”>A</span></div></body></html>
