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

使用CSS，如何应用多个转换？

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

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

你必须把它们放在一行，像这样：

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

当您有多个变换指令时，将只应用最后一个。这和其他CSS规则一样。

请记住，从右向左应用多个变换单行指令。

此：变换：缩放（1,1.5）旋转（90度）；和：变换：旋转（90度）比例（1,1.5）；

不会产生相同的结果：

.orderOne、.orderTwo{字体系列：无衬线；字体大小：22px；颜色：#000；显示：内联块；}.orderOne{变换：缩放（1，1.5）旋转（90度）；}.orderTwo命令{变换：旋转（90度）比例（1，1.5）；}<div class=“orderOne”>A.</div><div class=“orderTwo”>A.</div>

2012-05-26 11:17:42

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

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

2014-01-02 08:23:13

我加上这个答案并不是因为它可能有帮助，而是因为它是真的。

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

我从谷歌搜索时发现的一些随机网站上抓取了以下图片，其中显示了旋转矩阵：

绕x轴旋转：绕y轴旋转：绕z轴旋转：

我找不到翻译的好例子，所以假设我记得/理解正确，翻译：

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

更多信息请参阅维基百科关于转换的文章以及Pragamatic CSS3教程，该教程对其进行了很好的解释。我发现的另一个解释任意旋转矩阵的指南是Egon Rath关于矩阵的注释

当然，矩阵乘法在这些4x4矩阵之间起作用，因此要执行旋转后进行平移，需要制作适当的旋转矩阵并将其乘以平移矩阵。

这可以给你多一点自由，让你做得恰到好处，也会让任何人几乎完全不可能理解它在做什么，包括你在内。

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

编辑：我刚刚意识到我错过了提到这可能是最重要和最实用的用途，那就是通过JavaScript逐步创建复杂的3D转换，这样做会更有意义。

2014-07-07 08:04:18

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

<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使用变换制作元素动画时非常有用。

2016-09-15 09:20:34

从这里开始，在CSS中，若您重复2个或更多值，则始终应用最后一个值，除非使用！重要的标签，但同时避免使用！尽可能重要，所以在你的情况下这就是问题所在，所以在这种情况下，第二个变换会覆盖第一个变换。。。

那你怎么能做你想做的？。。。

别担心，转换同时接受多个值。。。因此，下面的代码将起作用：

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

2018-04-17 03:04:15

将来的某个时候，（现在可用，请参阅下面的更新）我们可以这样写：

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之外，找不到任何关于当前浏览器支持的内容。希望有一天我会回来更新浏览器支持；）

在本文中找到了有关当前浏览器的变通方法的信息，您可能希望查看这些信息。

更新：功能已在firefox72中

更新：现已推出chrome 104、edge 104、safari 14.1，请参见https://web.dev/css-individual-transform-properties/#:~：text=支持%20这些%20属性。-，浏览器%20支持，-%3A

2018-11-27 15:43:54

在单行css中转换旋转和平移：-如何？

div.className{变换：旋转（270度）平移（-50%，0）；-webkit转换：旋转（270度）平移（-50%，-50%）；-moz变换：旋转（270度）平移（-50%，-50%）；-ms变换：旋转（270度）平移（-50%，-50%）；-o变换：旋转（270度）平移（-50%，-50%）；浮动：左侧；位置：绝对；顶部：50%；左：50%；}<html><head></head><body><div class=“className”><span style=“font-size:50px”>A</span></div></body></html>

2018-12-27 11:20:18

我学到的教训。

如果您使用的是样式的React css，请不要包含分号，即使是在它的末尾，因为它是由React自动内部包含的。

就像：

style={                             
  transform: "rotate(90deg) scaleX(-1)",
}

2021-10-23 16:41:26

这是一个老问题，但最近发现与我非常相关。我发现“transform:metrix（..）”更方便使用。因此，对于所讨论的问题，下面的示例在x轴上应用约15度旋转和向右平移20px（为了方便）。

.matrix转换{变换原点：左上；变换：矩阵（0.965,0.258，-0.258,0.965,20,0）；字体大小：30px；}.组合变换{变换原点：左上；变换：旋转（15度）平移X（20像素）；字体大小：30px；}＜div class＝matrixTransform＞A＜/div＞＜div class＝combindTransform＞B＜/div＞

根据我收集的数据，这个特定的变换使用初始的4个参数来表示变换，例如缩放、旋转。并且似乎是按行和列的顺序排列的。其余两个分别是x轴和y轴上的平移。我发现Wolfram Alpha备忘单（计算器）非常有用。

2022-08-13 20:25:07

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

推荐文章

最新文章

标签