Question

我有一个div，我想围绕它的y轴旋转（带透视），然后围绕不同的原点再做一次3D旋转并显示结果。这可能吗？我只能在变换语句之外使变换源工作，因此定义一个新的变换只会覆盖第一个变换。

我还试过嵌套div并在内部div上做一次转换，在外部div上做另一次转换，但结果只是第一次转换到第二次转换的投影，它不存在于它自己的飞机，在屏幕上看起来完全错误。

据我所知，我不能在javascript中使用canvas，因为那些转换没有透视。

这就是我想要做的事情：

-webkit-transform-origin: 0px 0px;
-webkit-transform: perspective(1000px) rotateY(-90deg);
-webkit-transform-origin: 200px 200px;
-webkit-transform: perspective(1000px) rotateX(x deg) rotateZ(z deg);

关于如何看待这两种变换的结果的任何想法？

Answer 1

不涉及包装器的解决方案是将两个转换链接在它们之间translate3d。任何转换变换都会移动transform-origin以用于所有后续转换 - translateX(tx)沿x轴移动tx，translateY(ty)沿y轴移动ty ，translateZ(tz)沿z轴向tz移动，translate3d(tx, ty, tz)沿x轴向tx移动，沿y轴向ty移动tz沿z轴{1}}。

所以你的transform会变成：

transform: perspective(1000px) rotateY(-90deg) 
           translate3d(200px, 200px, 0) 
           perspective(1000px) rotateX(x deg) rotateZ(z deg);

Answer 2

我想我找到了答案，请使用

-webkit-transform-style: preserve-3d;

在包装div中。

感谢this问题，并显示here并解释了here（来自该问题的答案）。

是否可以将两个具有不同来源的转换应用于一个div？

2 个答案: