Wie wende ich mehrere Transformationen in CSS an?
P粉066224086
P粉066224086 2023-08-31 14:39:52
0
3
653
<p>Wie wende ich mehrere <code>transformationen</code> an? </p> <p>Beispiel: Im Folgenden gilt nur die Translation, nicht die Rotation. </p> <pre class="brush:php;toolbar:false;">li:nth-child(2) { transformieren: drehen (15 Grad); transform: Translate(-20px,0px); }</pre> <p><br /></p>
P粉066224086
P粉066224086

Antworte allen(2)
P粉081360775

我添加这个答案不是因为它可能有帮助,而是因为它是真实的。

除了使用现有答案解释如何通过链接进行多个翻译之外,您还可以 自己构建 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 转换,这样事情会变得更有意义。

P粉231112437

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

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

当您有多个转换指令时,仅应用最后一个。就像任何其他 CSS 规则一样。


请记住,多个转换一行指令是从右向左应用

这个:变换:scale(1,1.5)rotate(90deg);
和:变换:旋转(90deg)缩放(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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage