如何在CSS中应用多个转换？

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

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

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

#1 楼

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

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

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

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

此：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年5月26日12:14

是否可以在其他变换之前应用一个变换...例如旋转之前的倾斜。对于我而言，无论我做什么，都首先旋转元素，然后再使其倾斜，这将导致产生不是我想要的东西。

–穆罕默德·乌默尔
2013年9月7日19:50

所以不要将它们分成多行

– aWebDeveloper
2014年1月29日在18:53

transform：translate（100px，100px）旋转（45deg）translate（100px，100px）旋转（45deg）;等于transform：translate（200px，200px）rotation（90deg），最后一个将添加

–bigCat
2015年3月17日14:47

@ jave.web，您是说从右到左，对吗？对于转换：scale（1,1.5）rotation（90deg）;，旋转将在scale之前进行。

– args
19年1月16日在19:03

#2 楼

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

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

我从谷歌搜索时发现的某个随机位置抓取了以下图像，其中显示了旋转矩阵：

绕x轴旋转：

y轴：

绕z轴旋转：

我找不到很好的翻译示例，因此假设我没记错/理解它，翻译：

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

在Wikipedia上有关转换的文章以及Pragamatic CSS3教程中对此进行了很好的介绍，请参见更多内容。我发现的另一本可以解释任意旋转矩阵的指南是Egon Rath关于矩阵的注释

当然，这4x4矩阵之间的矩阵乘法有效，因此要执行旋转然后进行平移，您需要制作适当的旋转矩阵并将其乘以翻译矩阵。

这可以使您有更多的自由来正确选择它，也将使几乎所有人都无法理解它在做什么，包括您在内只有五个人分钟。

但是，您知道，它可以工作。

编辑：我只是意识到我错过了提及此功能最重要和最实际的用途，那就是逐步创建通过JavaScript进行复杂的3D转换，使事情变得更有意义。

不幸的是，mines.edu上的“随机站点”现在是固定链接。

–马特·萨赫（Matt Sach）
15年2月24日在10:18

就像9elements链接一样：(

–马特·萨赫（Matt Sach）
15年2月24日在11:09

@MattSach好吧，对我来说显然“今天晚些时候”意味着“六个月后”，但是至少9elements链接是固定的（其他人使用Wayback固定了随机站点的链接，我遵循了它们的指导。）

–杰夫
15年8月18日，0：53

我也这样做是为了帮助您了解它们。

– alex
15年9月24日在6:35

这确实不适合本主题

–user151496
15年12月16日在17:39

#3 楼

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

<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进行带有变换的动画元素时，这非常有用。

您忘记的转换样式：3D保存

–杰克·吉芬（Jack Giffin）
17年3月3日在22:49

嵌套2D转换不是必需的-取决于所需的结果。转换起源很可能会派上用场。

– Richtelford
17年4月4日在23:24

#4 楼

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

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

#5 楼

将来的某个时候，我们可以这样写：

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

找到了本文中的信息，您可能需要检查一下有关当前浏览器的解决方法。

#6 楼

只是从那里开始，在CSS中，如果重复两个或多个值，则始终应用最后一个值，除非使用!important标记，但同时尽量避免使用!important，所以在这种情况下，这就是问题所在，所以在这种情况下，第二个转换会覆盖第一个转换...
那么您该怎么做呢？...
不用担心，转换同时接受多个值...因此，下面的代码将起作用：

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转换>>

#7 楼

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

编程黑洞网