使用CSS，如何应用多个转换？
示例：在以下示例中，仅应用平移，而不应用旋转。
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
当前回答
我学到的教训。
如果您使用的是样式的React css，请不要包含分号，即使是在它的末尾，因为它是由React自动内部包含的。
就像：
style={
transform: "rotate(90deg) scaleX(-1)",
}
其他回答
您还可以使用额外的标记层应用多个转换，例如：
<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使用变换制作元素动画时非常有用。
你必须把它们放在一行，像这样：
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)",
}
在单行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>
