如何在CSS中应用多重转换?-HowtoapplymultipletransformsinCSS?

617  

You have to put them on one line like this:

你必须把它们放在这样一条线上:

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

When you have multiple transform directives, only the last one will be applied. It's like any other CSS attribute.

当您有多个转换指令时，只有最后一个将被应用。就像其他CSS属性一样。

33  

I'm adding this answer not because it's likely to be helpful but just because it's true.

我加这个答案不是因为它可能有用，而是因为它是真的。

In addition to using the existing answers explaining how to make more than one translation by chaining them, you can also construct the 4x4 matrix yourself

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

I grabbed the following image from some random site I found while googling which shows rotational matrices:

我从我在谷歌搜索中发现的一些随机的网站上抓取了如下图片:

Rotation around x axis:
Rotation around y axis:
Rotation around z axis:

绕x轴旋转:绕y轴旋转:绕z轴旋转:

I couldn't find a good example of translation, so assuming I remember/understand it right, translation:

我找不到一个翻译的好例子，所以假设我记得/理解它，翻译:

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

See more at the Wikipedia article on transformation as well as the Pragamatic CSS3 tutorial which explains it rather well. Another guide I found which explains arbitrary rotation matrices is Egon Rath's notes on matrices

请参阅维基百科关于转换的文章以及实用的CSS3教程，它解释得很好。我发现的另一个解释任意旋转矩阵的指南是Egon Rath关于矩阵的笔记。

Matrix multiplication works between these 4x4 matrices of course, so to perform a rotation followed by a translation, you make the appropriate rotation matrix and multiply it by the translation matrix.

矩阵乘法在这些4 * 4矩阵之间是可以的，所以要做一个旋转，然后是一个平移，你要做一个合适的旋转矩阵并乘以平移矩阵。

This can give you a bit more freedom to get it just right, and will also make it pretty much completely impossible for anyone to understand what it's doing, including you in five minutes.

这可以给你更多的自由来获得它的权利，也会使任何人都不可能理解它在做什么，包括你在五分钟内。

But, you know, it works.

但是，你知道，它是有效的。

Edit: I just realized that I missed mentioning probably the most important and practical use of this, which is to incrementally create complex 3D transformations via Javascript, where things will make a bit more sense.

编辑:我刚刚意识到，我漏掉了可能最重要和最实际的使用方法，即通过Javascript增量地创建复杂的3D转换，这样做会更有意义。

13  

You can also apply multiple transforms using an extra layer of markup e.g.:

您还可以使用额外的标记层来应用多个转换。

    Hey!

This can be really useful when animating elements with transforms using Javascript.

这在使用Javascript进行转换的元素时非常有用。

12  

You can apply more than one transform like this:

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

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

0  

A simple way to apply multiple transform is this

这是一个应用多重变换的简单方法。

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

But also don't forget that you need to add prefix to let it work in all browsers as some browers like safari, IE not support tranform property without prefix.

但也不要忘记，您需要添加前缀，以便让它在所有浏览器中工作，就像一些浏览器(如safari)一样(不支持没有前缀的转换属性)。

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

0  

Just start from there that in CSS, if you repeat 2 values or more, always last one gets applied, unless using !important tag, but at the same time avoid using !important as much as you can, so in your case that's the problem, so the second transform override the first one in this case...

从那里开始,在CSS,如果你重复2或多个值,总是最后一个被应用,除非使用!重要的标签,但同时避免使用!重要的尽可能多的,所以在你的案子的问题,所以第二变换覆盖第一个在这种情况下……

So how you can do what you want then?...

那么，你怎么能做你想做的呢?

Don't worry, transform accepts multiple values at the same time... So this code below will work:

不要担心，转换同时接受多个值…下面的代码将会工作:

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

If you like to play around with transform run the iframe from MDN below:

如果您喜欢使用转换运行iframe从MDN到下面:

Look at the link below for more info:

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

<>

< >

-3  

For example

例如

-webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;

I am using enjoycss tool

我使用的是乐趣css工具。

http://enjoycss.com/5C#transform

http://enjoycss.com/5C变换

it generates css code for required parameters of transform using GUI to generate the transfrom code ;)

它为所需的转换参数生成css代码，使用GUI生成transfrom代码;