如何在 CSS 中应用多个变换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10765755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply multiple transforms in CSS?
提问by Ben
Using CSS, how can I apply more than one transform?
使用 CSS，如何应用多个transform？
Example: In the following, only the translation is applied, not the rotation.
示例：在下面，仅应用平移，而不应用旋转。
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
回答by lukad
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 rule.
当您有多个转换指令时，只会应用最后一个。这就像任何其他 CSS 规则。
Keep in mind multiple transform one line directives are applied from right to left.
请记住，多个变换一行指令是从右到左应用的。
This: transform: scale(1,1.5) rotate(90deg);
and: transform: rotate(90deg) scale(1,1.5);
这：transform: scale(1,1.5) rotate(90deg);
和：transform: rotate(90deg) scale(1,1.5);
will notproduce the same result:
会不会产生同样的结果：
.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>回答by Jeff
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 googlingwhich 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 transformationas well as the Pragamatic CSS3 tutorialwhich explains it rather well. Another guide I found which explains arbitrary rotation matrices is Egon Rath's notes on matrices
在Wikipedia 上关于转换的文章以及Pragamatic CSS3 教程中查看更多信息，该教程对其进行了很好的解释。我发现的另一个解释任意旋转矩阵的指南是Egon Rath's notes on matrixes
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.
矩阵乘法当然在这些 4x4 矩阵之间起作用，因此要执行旋转后平移，您需要制作适当的旋转矩阵并将其乘以平移矩阵。
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 转换，这样事情会更有意义。
回答by richtelford
You can also apply multiple transforms using an extra layer of markup e.g.:
您还可以使用额外的标记层应用多个转换，例如：
<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>
This can be really useful when animating elements with transforms using Javascript.
这在使用 Javascript 为具有变换的元素设置动画时非常有用。
回答by geekme
You can apply more than one transform like this:
您可以像这样应用多个转换：
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
回答by schellmax
Some time in the future, we can write it like this:
未来的某个时候，我们可以这样写：
li:nth-child(2) {
rotate: 15deg;
translate:-20px 0px;
}
This will become especially useful when applying individual classes on an element:
在元素上应用单个类时，这将变得特别有用：
<div class="teaser important"></div>
.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}
This syntax is defined in the in-progress CSS Transforms Level 2 specification, but can't find anything about current browser support other then chrome canary. Hope some day i'll come back and update browser support here ;)
此语法在进行中的CSS Transforms Level 2 规范中定义，但除了 chrome canary 之外，找不到有关当前浏览器支持的任何信息。希望有一天我会回来更新浏览器支持;)
Found the info in this articlewhich you might want to check out regarding workarounds for current browsers.
在本文中找到了您可能想要查看有关当前浏览器的变通方法的信息。
回答by Alireza
Just start from there that in CSS, if you repeat 2 values or more, always last one gets applied, unless using !importanttag, but at the same time avoid using !importantas much as you can, so in your case that's the problem, so the second transform overridethe first one in this case...
只是从那里开始，在CSS 中，如果您重复 2 个或更多值，除非使用!important标签，否则总是应用最后一个值，但同时!important尽可能避免使用，所以在您的情况下，这就是问题所在，所以第二个在这种情况下，转换覆盖第一个...
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 MDNbelow:
如果您喜欢玩转换，请从下面的MDN运行 iframe ：
<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive " width="100%" frameborder="0" height="250"></iframe>Look at the link below for more info:
查看以下链接了解更多信息：
回答by Vinkal
Transform Rotate and Translate in single line css:-How?
在单行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>回答by Gaurav Aggarwal
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，IE 不支持没有前缀的转换属性。
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
-webkit-transform : translate(-20px, 0px) rotate(15deg);
}
回答by Nedudi
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
我正在使用 enjoycss 工具
http://enjoycss.com/5C#transform
http://enjoycss.com/5C#transform
it generates css code for required parameters of transform using GUI to generate the transfrom code ;)
它使用 GUI 生成转换所需参数的 css 代码以生成转换代码；)
