如何让Microsoft Edge在透视图中正确处理我的css for 3D，以便鼠标悬停？

我正在使用css属性

透视图

和

变换

以html创建一个3D世界。在Google Chrome中，一切都可以正常工作，但在Microsoft Edge中，存在一些问题。。。我使用这个JSFIDLE缩小了范围：

小提琴的第三个变体是它出错的地方。它在谷歌Chrome中运行良好，但在微软Edge中，红色div在鼠标悬停时将其颜色改为绿色时，反应不佳。它只会将鼠标悬停在红色div的底部

在第四个变体中，我删除了红色div的

变换样式：preserve-3d

，一切又恢复正常

有没有人知道这里发生了什么以及如何解决

---

另外，就我的真实情况而言，有时我有一个需要保留3d的子div，有时我没有子div。根据子div的存在，使用设置和删除

变换样式：preserve-3d

，这显然不是一个选项。

您需要在css中为3d属性添加前缀，使用。您可以在站点本身上执行此操作，也可以将其作为扩展添加到您选择的代码编辑器中

它将向代码中添加一些前缀，如下所示：

-webkit-transform-origin: bottom left;
      transform-origin: bottom left;
-webkit-transform: rotateX( 30deg );
      transform: rotateX( 30deg );
      background: red;
-webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;

以下是更新的

---

你应该为你的每一个网络项目添加前缀。

我发现了一个相对简单的技巧/解决方法来“解决”这个问题：只需添加一个额外的子div，使其不可见，并使用

transform:rotateX（1deg）

将其旋转出平面。请参阅jsfiddle:

感谢您的努力，但不幸的是，这并不能解决问题。关于Chrome，也有人说它需要-webkit-前缀，但不管有没有前缀，在Chrome中它都可以工作，在Edge中它有一个奇怪的bug/小故障。对我来说很好。您所关心的确切问题是什么？您确定第三种变体没有给出我在问题中描述的问题吗？当您将鼠标悬停在文本所在的div部分时，红色div是否变为绿色？我使用的是Microsoft Edge 38.14393.0.0。@Pete也提到了Chrome，但两者似乎都不再需要它，添加它也不能解决我在Edge中遇到的问题。@Pete您提到的草稿只是关于2D变换的。我找到了一个关于3D的：第8章说了一些有趣的事情，可以解释我遇到的问题，但我只是没能准确地看到它。