后台中心与变换的3D和过滤模糊在Firefox

Question

inb4：对不起，这需要超长加载可怕的超大图像，点击链接并阅读问题，如果以后你不喜欢等待！

因此，我正在制作一个网站，其中我用2d图像移动鼠标使虚假的3D效果的this prototype。我想在用户点击其中一个三角形时突出显示滤镜模糊效果。

我的问题是it completely breaks in firefox当我添加的模糊。我没有问题，但在Chrome浏览器的模糊，但由于某种原因在Firefox中，应该居中的背景图像被右对齐，并由它自己的div裁剪，如果我在检查器中更改背景位置，它将移出车的区域。

这里的Chrome，然后我在Firefox中得到的屏幕截图。

我不完全舒尔如何在放弃整个模糊想法旁边这一点上做的。任何解决方案的想法都是优先

Answer 1

所以我必须完全设置为0旋转X Y和Z之前更改父母过滤器模糊设置通过javascript（仅当检测到Firefox时）。 Here's它现在看起来像什么。点击动画的GIf模糊，然后点击任何地方以消除模糊。适用于Chrome和Firefox！

它basicaly是这样工作的：

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