Firefox не отражает CSS-трансформации и перспективы

Question

У меня есть навигация, над которой я работаю, я хочу, чтобы ссылки были перекошены внутрь примерно на 40 градусов. У меня он работает нормально в Chrome, но я вижу некоторые проблемы с зависанием, выбором и позиционированием в FF, Safari и IE.

После выполнения моей собственной отладки я пришел к выводу, что эта строкаиспортить его вне хрома:

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

, однако, он используется для выравнивания навигации и не может быть удален. Так что теперь я очень смущен тем, что может происходить / вызывать. Я действительно только делаю небольшой поворот и не могу представить, что браузеры не поддерживают что-то такое базовое.

Есть ли альтернативы, которые могли бы помочь мне сделать это, чтобы в других браузерах не было ничего страшного? Прилагается мой JSFiddle: https://jsfiddle.net/7te51zw0/

---

Минимальный пример (более конкретизированная / стилизованная версия в JSFiddle)

HTML

<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>

CSS

/* 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;

}

Answer 1

Попробуйте этот код

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

}

/* change above css to below */

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

}