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

我有一个div，我想围绕它的y轴旋转（带有透视图），然后围绕不同原点做另一个3d旋转并显示结果。这可能吗？我只能在转换语句之外获得转换原点，因此定义一个新转换只会覆盖第一个转换。是否可以将不同来源的两个转换应用于一个div？

我也试过嵌套divs和做一个内部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);

我如何能看到这两个转变的结果任何想法？

来源

2011-10-02 Curyous

我想我已经找到了答案，在包装的div使用

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

。

感谢this的问题，并如here和解释here（从该问题的答案）。

来源

2011-10-02 07:45:38 Curyous

尼斯简单的答案是没有的事实，IE11不支持它。安娜的答案应该是公认的答案，因为它提供了使用翻译的一般方法。她还提供了一个解决方案，用于维护3d不能用于另一个问题。 –

以下是该解决方法：http://stackoverflow.com/questions/20725192/css3-3d-cube-ie-transform-style-preserve-3d-workaround –

不涉及具有包装的解决方案是链接两个变换之间的translate3d。任何平移变换移动transform-origin为所有后续的变换 - 沿x轴translateX(tx)移动时，它通过tx，translateY(ty)移动时，它通过ty沿y轴，translateZ(tz)沿着z轴移动时，它通过tz和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);

来源

2013-01-19 14:26:52 Ana

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

回答

相关问题