Javascript 在CSS中复制Flash立方体旋转：保留正确的透视图

我正在将Flash Web应用程序转换为Javascript（HTML和CSS）Web应用程序。我有一个立方体旋转动画工作，但我有一个透视问题

我的问题：我不确定应该使用哪个CSS属性来复制Flash版本透视图（请参见下面的两张图片）

下面的两张图片是在立方体旋转时拍摄的，您可以在透视图中看到差异（第二张图片太宽，看起来应该像第一张）。您可以在这里看到一个工作示例（注意，它仅适用于Chrome或Safari）：

• 第一张图片取自flash应用程序，显示了正确的透视图（我正试图用CSS实现这一点）

• 第二张图片取自我的CSS、Javascript和HTML web应用程序，立方体旋转的角度不正确。为了实现上面的图像立方体透视图，我应该更改什么CSS属性

---

请注意：立方体面与flash版本的尺寸完全相同。我目前使用CSS属性-webkit透视图：0-webkit透视图来源：0

在

.cubeContainer

选择器上，您有

-webkit透视图：0，应该是
-webkit透视图：1000

这将设置透视图与屏幕的距离“更远”，其中0将透视图设置为屏幕的大致位置

感谢您的帮助：），为什么是1000，它与每个立方体面/分区的宽度/高度有关？我能不能总是指定1000，不管立方体面有多大，它都能工作？这取决于个人品味。我用1000，因为我认为它看起来很漂亮，你可以用100，但是这个盒子不能“往回走太远”。用这个数字做实验，看看你喜欢什么。这些面将始终与您指定的宽度/高度相同，因此请选择一个与之配合使用的透视图，这将是我的建议：）