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

在 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;
}

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

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