Firefox不反映CSS转换和透视图

我有一个导航，我在工作，我希望链接是向内倾斜约40度。我在chrome上工作得很好，但我发现在FF、Safari和IE中悬停、选择和定位都有一些问题

通过我自己的调试，我认为这一行在chrome之外搞砸了：

.splash-content {
    transform-origin: center right; //this line
}

但是，它正用于对齐导航，无法删除。所以现在我对可能发生的事情/原因感到非常困惑。我真的只是做了一个小的旋转，无法想象浏览器不支持这样基本的东西

有没有其他方法可以帮助我实现这一点，这样在其他浏览器中体验就不会很糟糕了？附件是我的JSFIDLE：

---

最少的示例（JSFIDLE中更加充实/样式化的版本）

HTML

试试这个代码

.splash内容：悬停{
背景：红色；
变换：旋转（-25度）平移（0）比例（1）；
光标：指针；
}
/*将上面的css更改为下面的css*/
.splash-menu\u项：悬停.splash内容{
背景：红色；
变换：旋转（-25度）平移（0）比例（1）；
光标：指针；
}

您需要在此处发布问题，而不是任何第三方网站。@Rob我会更新，但我在该网站上工作多年，从未遇到过提供JSFIDLE的问题，而不是用大量代码填充问题。每天有8000到10000名访问者，我们正在尽可能快地打字来回答这些问题。不幸的是，有能力关闭这些东西的新手已经放弃了维护规则（我链接到）。我每天帮助接近40个这样的东西，所以有时候只需要一段时间。在任何情况下，不要在其他人跳下悬崖的时候跳下悬崖。更新示例问题是，您的链接现在位于其容器的下方，该容器会捕获所有指针事件。你可以很快就搞定它，但最好是旋转整个容器，而不是单独旋转每个项目。

<div class="splash-perspective">
  <div class="splash-outer-container">
    <div class="splash-stage">
      <ul class="splash-menu">
        <li class="splash-menu__item">
          <div class="splash-content">
            <a href="#">Shop</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

/* SPLASH MENU */
.splash-perspective {
  perspective: 100vw;
}

.splash-container {
  transform: translateZ(0);
  transform-style: preserve-3d;
}

.splash-stage {
  transform-style: preserve-3d;
}

.splash-menu {
  text-align: right;
  transform-style: preserve-3d;
}

.splash-menu__item {
  cursor: pointer;
  transform-style: preserve-3d;
}

.splash-content {
  transform: rotateY(-60deg) translateZ(0) scale(1);
  transform-style: preserve-3d;
  transform-origin: center right;
  backface-visibility: hidden;
}

.splash-content:hover {
  background: red;
  transform: rotateY(-25deg) translateZ(0) scale(1);
  cursor: pointer;

}