Firefox 上具有变换 3D 和滤镜模糊的背景中心

Question

inb4：抱歉，图片太大，加载时间超长，如果您不想等待，请单击链接并阅读问题！

所以我正在制作一个网站 this prototype，在该网站上我使用鼠标移动 2d 图像来制作假 3D 效果。当用户单击其中一个三角形以将焦点放在弹出窗口上时，我想使用滤镜模糊。

我的问题是 it completely breaks in firefox 添加模糊时。我对 chrome 中的模糊没有问题，但由于某些原因在 firefox 中，本应居中的背景图像变为右对齐并被其自身 div 裁剪，如果我在检查器中更改背景它移出越野车区域的位置。

这是 chrome 的屏幕截图，然后是我在 firefox 中获得的内容。

除了放弃整个模糊的想法之外，我现在还不确定该怎么做。感谢任何解决方案的想法

Answer 1

因此，在通过 javascript 更改父过滤器模糊设置之前，我必须将旋转 X Y 和 Z 完全设置为 0（仅当检测到 Firefox 时）。 Here's 目前的情况。单击动画 GIf 进行模糊处理，然后单击任意位置以消除模糊处理。适用于 Chrome 和 Firefox！

它基本上是这样工作的：

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(!isFirefox){
  3Danimation();
}