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

602

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

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

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

css css-transforms

— 本
source

993

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

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>

展开摘要

— 卢卡德
source

55

我尝试用“”分隔它们，就像用多个阴影进行分隔一样，但是没有用。谢谢。

— 2012年

2

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

— 穆罕默德·乌默

2

所以不要将它们分成多行

— aWebDeveloper 2014年

2

transform：translate（100px，100px）旋转（45deg）translate（100px，100px）旋转（45deg）; 等于transform：translate（200px，200px）

— rotation

3

@ jave.web，您是说从右到左，对吗？对于transform: scale(1,1.5) rotate(90deg);，旋转将发生在比例尺之前。

— Jargs

43

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

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

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

绕x轴绕x轴旋转
旋转：绕y轴绕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转换，这会使事情变得更有意义。

— 杰夫
source

3

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

— 马特·萨赫

1

就像9elements链接一样：(

— Matt Sach

1

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

— Jeff

1

我还做了这个帮助你理解他们。

— Alex

6

这确实不适合该主题

— user151496 2015年

24

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

<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脚本对元素进行动画转换时，这非常有用。

— 里奇福德
source

您忘记了transform-style: preserve-3d

— 杰克·吉芬

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

— richtelford

21

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

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

— 极客
source

2

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

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

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

— 谢尔马克斯
source

1

只是从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>

展开摘要

请查看下面的链接以获取更多信息：

<< CSS转换>>

— 阿里雷扎
source

0

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

展开摘要

— 温卡
source