使用CSS，如何应用多个转换？
示例：在以下示例中，仅应用平移，而不应用旋转。
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
当前回答
在单行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>
其他回答
我学到的教训。
如果您使用的是样式的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-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
将来的某个时候，（现在可用，请参阅下面的更新）我们可以这样写：
li:nth-child(2) {
rotate: 15deg;
translate:-20px 0px;
}
当在元素上应用单个类时，这将变得特别有用：
<div class="teaser important"></div>
.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}
该语法在进行中的CSS Transforms Level 2规范中定义，但除了chrome canary之外，找不到任何关于当前浏览器支持的内容。希望有一天我会回来更新浏览器支持；）
在本文中找到了有关当前浏览器的变通方法的信息，您可能希望查看这些信息。
更新：功能已在firefox72中
更新：现已推出chrome 104、edge 104、safari 14.1，请参见https://web.dev/css-individual-transform-properties/#:~：text=支持%20这些%20属性。-，浏览器%20支持，-%3A
在单行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>
