CSS效果无法在Firefox上运行

Question

我的CSS效果不见了。它在Chrome中完美运行，但它在Mozilla Firefox中无法使用。

我尝试了-webkit和-moz前缀。没有-webkit它在Chrome中工作，但-moz在Firefox中无法正常工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

在使用3d转换的Firefox中使用“列”存在问题。

删除：

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>