Firefox 不反映 CSS 转换和透视答案

【问题标题】：Firefox not reflecting CSS Transforms and perspectiveFirefox 不反映 CSS 转换和透视
【发布时间】：2020-03-03 13:54:11
【问题描述】：

我正在处理一个导航，我希望链接向内倾斜大约 40 度。我在 chrome 中运行良好，但在 FF、Safari 和 IE 中发现悬停、选择和定位存在一些问题。

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

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

}

【问题讨论】：

您需要在此处发布minimal reproducible example，在您的问题中，而不是任何第三方网站。
@Rob 我会更新，但我已经在这个网站上工作多年，从来没有遇到过提供 jsfiddle 的问题，而不是用大量代码填充问题。
每天有 8000 到 10,000 名访问者，我们会尽可能快地输入以结束此类问题。不幸的是，有能力关闭此类事情的新人已经放弃尝试维护规则（我链接到）。我每天帮助关闭多达 40 件这样的事情，所以有时只需要一段时间。无论如何，不要在其他人都跳崖的时候跳崖。
已更新示例
问题是您的链接现在位于其容器下方，该容器确实捕获了所有指针事件。您可以通过disabling the pointer-events on the container 快速破解它，但您最好旋转整个容器而不是单独旋转每个项目。

标签： css css-transforms perspective

【解决方案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;

}

【讨论】：