使用CSS，如何应用多个transform？
示例：在下面，仅应用平移，而不应用旋转。
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
如何在CSS中应用多个转换？
第1900篇《如何在CSS中应用多个转换？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共7个回答
应用多重变换的一种简单方法是
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
但也不要忘记，您需要添加前缀以使其在所有浏览器中都能正常工作，因为某些浏览器（例如safari），IE不支持无前缀的tranform属性。
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
-webkit-transform : translate(-20px, 0px) rotate(15deg);
}
在单行CSS中变换旋转和平移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>将来的某个时候，我们可以这样写：
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之外，找不到有关当前浏览器支持的任何信息。希望有一天我会回来并在这里更新浏览器支持;）
在本文中找到了相关信息，您可能需要查看有关当前浏览器的解决方法。
您还可以使用额外的标记层来应用多个变换，例如：
<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>
当使用Java脚本对元素进行动画转换时，这非常有用。
您可以像这样应用多个转换：
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
只是从CSS的开头开始，如果重复两个或多个值，则总是应用最后一个值，除非使用!importanttag，但同时避免使用!important尽可能多的值，因此在您的情况下，这就是问题所在，因此第二个在这种情况下，转换会覆盖第一个...
那你该怎么做呢？...
不用担心，transform同时接受多个值...因此，下面的代码将起作用：
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>请查看下面的链接以获取更多信息：
相似问题
问题类别
For example
I am using enjoycss tool
http://enjoycss.com/5C#transform
it generates css code for required parameters of transform using GUI to generate the transfrom code ;)