如何让 Microsoft Edge 在鼠标悬停时正确处理我的 3D 透视图 css？

Question

我正在使用 css 属性 perspective 和 transform 在 html 中创建一个 3D 世界。在 Google Chrome 中一切正常，但在 Microsoft Edge 中有一些问题......我使用这个 jsfiddle 缩小了范围：https://jsfiddle.net/uke8bsvk/12/

fiddle 中的第三个变体是错误的地方。它在 Google Chrome 中工作正常，但在 Microsoft Edge 中，红色 div 通过将其颜色更改为绿色无法很好地响应鼠标悬停它。它只响应将鼠标悬停在靠近红色底部的地方 div.

在第四个变体中，我为红色 div 删除了 transform-style: preserve-3d 并且一切正常。

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

PS。在我的真实情况下，有时我有一个 child div 需要保留 3d，有时我没有 child div。根据 child div.

的存在，使用明显的脏工作设置和删除 transform-style: preserve-3d 并不是真正的选择

Answer 1

您需要使用 Autoprefixer 在 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;

这是更新后的 Fiddle.

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

Answer 2

我在 'solve' 问题周围发现了一个相对干净的 trick/work：只需添加一个额外的 child div，使其不可见并将其旋转出平面transform: rotateX( 1deg )。参见 jsfiddle：https://jsfiddle.net/uke8bsvk/13/

如何让 Microsoft Edge 在鼠标悬停时正确处理我的 3D 透视图 css？

How to get Microsoft Edge handling my css for 3D in perspective correctly for mouse hovering?

css

3d

transform

perspective

microsoft-edge