Wie wende ich mehrere Transformationen in CSS an?
P粉066224086
2023-08-31 14:39:52
<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>
我添加这个答案不是因为它可能有帮助,而是因为它是真实的。
除了使用现有答案解释如何通过链接进行多个翻译之外,您还可以 自己构建 4x4 矩阵
我从我在谷歌搜索时发现的一些随机站点显示了旋转矩阵:
绕 x 轴旋转:
绕 y 轴旋转:
绕 z 轴旋转:
我找不到很好的翻译示例,所以假设我记得/理解正确,翻译:
请参阅有关转换的维基百科文章以及Pragamatic CSS3 教程 很好地解释了这一点。我发现的另一个解释任意旋转矩阵的指南是 Egon Rath 关于矩阵的笔记
当然,这些 4x4 矩阵之间可以进行矩阵乘法,因此要执行旋转和平移,您需要创建适当的旋转矩阵并将其乘以平移矩阵。
这可以给你更多的自由来让它恰到好处,并且也使得任何人都几乎完全不可能理解它在做什么,包括五分钟内的你。
但是,你知道,它确实有效。
编辑:我刚刚意识到我错过了可能最重要和最实际的用途,即通过 JavaScript 逐步创建复杂的 3D 转换,这样事情会变得更有意义。
你必须将它们放在一行上,如下所示:
当您有多个转换指令时,仅应用最后一个。就像任何其他 CSS 规则一样。
请记住,多个转换一行指令是从右向左应用。
这个:
变换:scale(1,1.5)rotate(90deg);
和:
变换:旋转(90deg)缩放(1,1.5);
将不会产生相同的结果: