使用CSS，如何应用多个转换？
示例：在以下示例中，仅应用平移，而不应用旋转。
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
当前回答
你必须把它们放在一行，像这样：
li:nth-child(2) {
transform: rotate(15deg) translate(-20px,0px);
}
当您有多个变换指令时，将只应用最后一个。这和其他CSS规则一样。
请记住，从右向左应用多个变换单行指令。
此：变换：缩放（1,1.5）旋转（90度）；和：变换：旋转（90度）比例（1,1.5）；
不会产生相同的结果：
.orderOne、.orderTwo{字体系列：无衬线；字体大小：22px；颜色：#000；显示：内联块；}.orderOne{变换：缩放（1，1.5）旋转（90度）；}.orderTwo命令{变换：旋转（90度）比例（1，1.5）；}<div class=“orderOne”>A.</div><div class=“orderTwo”>A.</div>
其他回答
您还可以使用额外的标记层应用多个转换，例如：
<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个或更多值，则始终应用最后一个值，除非使用！重要的标签，但同时避免使用！尽可能重要，所以在你的情况下这就是问题所在，所以在这种情况下，第二个变换会覆盖第一个变换。。。
那你怎么能做你想做的？。。。
别担心，转换同时接受多个值。。。因此，下面的代码将起作用：
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转换>>
你必须把它们放在一行，像这样：
li:nth-child(2) {
transform: rotate(15deg) translate(-20px,0px);
}
当您有多个变换指令时，将只应用最后一个。这和其他CSS规则一样。
请记住，从右向左应用多个变换单行指令。
此：变换：缩放（1,1.5）旋转（90度）；和：变换：旋转（90度）比例（1,1.5）；
不会产生相同的结果：
.orderOne、.orderTwo{字体系列：无衬线；字体大小：22px；颜色：#000；显示：内联块；}.orderOne{变换：缩放（1，1.5）旋转（90度）；}.orderTwo命令{变换：旋转（90度）比例（1，1.5）；}<div class=“orderOne”>A.</div><div class=“orderTwo”>A.</div>
可以像这样应用多个变换：
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
我学到的教训。
如果您使用的是样式的React css，请不要包含分号，即使是在它的末尾，因为它是由React自动内部包含的。
就像：
style={
transform: "rotate(90deg) scaleX(-1)",
}
