CSS 效果不适用于 Firefox

Question

我的 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 中不起作用。

Answer 1

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

删除:

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

对于 block 包装器(在您的情况下为#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>