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

【问题标题】：Is it possible to apply two transformations with different origins to one div?是否可以将两个不同来源的转换应用于一个 div？
【发布时间】：2011-11-29 07:42:30
【问题描述】：

我有一个 div，我想围绕它的 y 轴旋转（带透视），然后围绕不同的原点对其进行另一个 3d 旋转并显示结果。这可能吗？我只能让 transformation-origin 在 -transformation 语句之外工作，因此定义一个新的转换只会覆盖第一个。

我也尝试过嵌套 div 并在内部 div 上进行一次转换并在外部 div 上进行另一次转换，但结果只是第一个转换投影到第二个平面上，它不存在它自己的飞机，所以在屏幕上看起来完全错误。

据我所知，我不能将 canvas 与 javascript 一起使用，因为这些转换没有透视图。

这就是我想要做的事情：

-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);

关于如何查看这两种转换的结果有什么想法吗？

【问题讨论】：

标签： css 3d transform

【解决方案1】：

我想我已经找到了答案，使用

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

在包装器 div 中。

感谢this 的问题，如图所示here 和解释here（来自该问题的答案）。

【讨论】：

如果不是因为 IE11 不支持它，这个答案很简单。 Ana 的答案应该是公认的答案，因为它提供了使用翻译的一般方法。她还为preserve-3d 在另一个问题中不起作用提供了一种解决方法。
解决方法如下：stackoverflow.com/questions/20725192/…

【解决方案2】：

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

所以你的transform 会变成：

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

【讨论】：