CSS 效果在 Firefox 上不起作用答案

【问题标题】：CSS effect not working on FirefoxCSS 效果在 Firefox 上不起作用
【发布时间】：2018-09-02 04:38:36
【问题描述】：

我的 CSS 效果丢失了。它在 Chrome 中运行良好，但在 Mozilla Firefox 中无法运行。

我尝试了 -webkit 和 -moz 前缀。如果没有-webkit，它可以在 Chrome 中运行，但使用-moz，它在 Firefox 中无法正常运行。

#perspective {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 2500px;
}

#grid {
  padding-right: 1em;
  position: absolute;
  top: 0;
  right: 0;
  width: 1000px;
  column-count: 4;
  column-gap: 0;
  padding-bottom: 15px;
  transform-origin: top right;
  padding-left: 15px;
  transform: rotateX(50deg) rotateZ(-40deg);
  transform-style: preserve-3d;
  z-index: 1;
}

#grid a {
  display: block;
  margin-bottom: 15px;
  margin-left: 15px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, .2);
  box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, .2);

  /*transform-style: preserve-3d;*/
}

#grid .brick {
  display: inline-block;
  width: 100%;
  height: 200px;
  border-radius: 15px;
  box-shadow: -5px 5px 0 0 #999;
  transition: all .2s ease;
  transform-origin: bottom;
  background-color: blue;
  border: 1px solid white;
}

#grid .brick:hover {
  transform: rotateX(-20deg);
  z-index: 5;
  box-shadow: -5px 2px 0 0 #999;
}

<div id="perspective">
    <div id="grid">
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
    </div>
</div>

上翻效果在 Firefox 中不起作用。

【问题讨论】：

预期输出是什么？
chrome 中的图块会向上翻转，尽管将其放在问题中会好得多
即使使用自动前缀，结果也不一样。一点谷歌搜索把我带到了同样的问题。我猜两者的呈现方式不同。
也这样做了，但在 mozila 上的结果相同
这可能会有所帮助stackoverflow.com/a/30287059

标签： css

【解决方案1】：

在 Firefox 中使用带有 3d 转换的“列”时出现问题。

删除：

column-count: 4;
column-gap: 0;

对于块包装器（在你的情况下为#grid a）使用

display: inline-block;
width:25%;
transform-style: preserve-3d;



#grid a {
  display: inline-block;
  width:25%;
  margin-bottom: 15px;
  margin-left: 15px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, .2);
  box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, .2);
  transform-style: preserve-3d;
}

#perspective {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 2500px;
}

#grid {
  padding-right: 1em;
  position: absolute;
  top: 0;
  right: 0;
  width: 1000px;
  padding-bottom: 15px;
  transform-origin: top right;
  padding-left: 15px;
  transform: rotateX(50deg) rotateZ(-40deg);
  transform-style: preserve-3d;
  z-index: 1;
}

#grid a {
  display: inline-block;
  width:25%;
  margin-bottom: 15px;
  margin-left: 15px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, .2);
  box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, .2);
  transform-style: preserve-3d;
}

#grid .brick {
  display: inline-block;
  width: 100%;
  height: 200px;
  border-radius: 15px;
  box-shadow: -5px 5px 0 0 #999;
  transition: all .2s ease;
  transform-origin: bottom;
  background-color: blue;
  border: 1px solid white;
}

#grid .brick:hover {
  transform: rotateX(-20deg);
  z-index: 5;
  box-shadow: -5px 2px 0 0 #999;
}

<div id="perspective">
    <div id="grid">
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
      <a href="#test"><span class="brick"></span></a>
    </div>
</div>

【讨论】：