Css 是否可以对一个div应用两个具有不同起源的转换？

我有一个div，我想绕着它的y轴旋转（透视），然后再绕着另一个原点做一个3d旋转，然后显示结果。这可能吗？我只能在-transformation语句之外使用transformation origin，因此定义新的转换只会覆盖第一个转换

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

就我所知，我不能将画布与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);

---

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

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

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

在包装袋里

---

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

不需要包装器的解决方案是在两个转换之间使用

translate3d

链接。任何平移变换都会为所有后续变换移动变换原点-

translateX（tx）

沿x轴移动它

tx

，

translateY（ty）

沿y轴移动它

ty

，

translateZ（tz）

沿z轴移动它

tz

，并

translate3d（tx，ty，tz）

将其沿x轴移动

tx

，沿y轴移动

ty

，沿z轴移动

tz

因此，您的

转换将变成：

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

如果不是因为IE11不支持它的话，答案很简单。安娜的答案应该是公认的答案，因为它提供了使用翻译的一般方法。她还为preserve-3d在另一个问题中不起作用提供了一个解决方案。以下是该解决方案：