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

Question

使用CSS,我如何申请多个transform？

示例:在下文中,仅应用平移,而不是旋转.

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

Answer 1

你必须将它们放在一行,如下所示:

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);

会不会产生同样的结果:https://jsfiddle.net/852hzq9w/

Answer 2

我添加这个答案不是因为它可能有用,而是因为它是真的.

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

我从google搜索时发现的一个随机网站抓取了下面的图像,显示了旋转矩阵:

绕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转换,这将使事情变得更有意义.

Answer 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使用变换动画元素时,这非常有用.

Answer 4

您可以应用多个这样的转换:

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

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

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

更新：功能已登陆 Firefox 72