725

使用 CSS，我如何应用多个transform？

示例：在下文中，仅应用了平移，而不应用了旋转。

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}
4

8 回答 8

1213

您必须像这样将它们放在一行上：

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

当您有多个转换指令时，只会应用最后一个。就像任何其他 CSS 规则一样。

请记住，从右到左应用多个变换一行指令。

这：transform: scale(1,1.5) rotate(90deg);
和：transform: rotate(90deg) scale(1,1.5);

不会产生相同的结果：

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}
<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

于 2012-05-26T11:17:42.260 回答
49

我添加这个答案不是因为它可能会有所帮助，而是因为它是真的。

除了使用现有的答案来解释如何通过链接它们来进行多个翻译之外，您还可以自己构建 4x4 矩阵

我从谷歌搜索时发现的一些随机网站抓取了以下图片，其中显示了旋转矩阵：

绕 x 轴绕 x 轴旋转
旋转： 绕 y 轴绕 y 轴旋转
旋转： 绕 z 轴旋转：绕 z 轴旋转

我找不到一个很好的翻译例子，所以假设我记得/理解正确，翻译：

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

查看更多关于转换的维基百科文章以及解释它的实用 CSS3 教程。我发现的另一个解释任意旋转矩阵的指南是Egon Rath 关于矩阵的注释

矩阵乘法当然适用于这些 4x4 矩阵，因此要执行旋转后平移，您需要制作适当的旋转矩阵并将其乘以平移矩阵。

这可以让你有更多的自由来让它恰到好处，并且也会让任何人几乎完全不可能理解它在做什么，包括你在五分钟内。

但是，你知道，它有效。

编辑：我刚刚意识到我错过了可能最重要和最实际的用途，即通过 JavaScript 逐步创建复杂的 3D 转换，这样事情会更有意义。

于 2014-07-07T08:04:18.160 回答
30

您还可以使用额外的标记层应用多个转换，例如：

<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 为带有变换的元素设置动画时非常有用。

于 2016-09-15T09:20:34.290 回答
22

您可以像这样应用多个转换：

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}
于 2014-01-02T08:23:13.183 回答
7

在未来的某个时间，我们可以这样写：

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 之外，找不到任何关于当前浏览器支持的信息。希望有一天我会回来并在这里更新浏览器支持；）

在本文中找到了您可能想要查看的有关当前浏览器解决方法的信息。

更新：功能已登陆 Firefox 72

于 2018-11-27T15:43:54.010 回答
1

从那里开始，在CSS中，如果您重复 2 个或更多值，除非使用标签，否则始终应用最后一个!important，但同时!important尽可能避免使用，所以在您的情况下，这就是问题所在，所以第二个在这种情况下，转换覆盖第一个......

那么你怎么能做你想做的呢？...

别担心，transform 同时接受多个值......所以下面的代码可以工作：

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

如果您喜欢使用 transform 运行以下MDN中的 iframe： 

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

查看下面的链接了解更多信息：

<< CSS 变换 >>

于 2018-04-17T03:04:15.847 回答
0

在单行 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>

于 2018-12-27T11:20:18.097 回答
0

我学到的教训。

如果您使用style的是 React css，请不要包含分号，即使在它的末尾也是如此，因为它是由 React 自动包含在内部的。

就像：

style={                             
  transform: "rotate(90deg) scaleX(-1)",
}
于 2021-10-23T16:41:26.367 回答