CSS effect does not work in Firefox

Question

My CSS effect is missing. It works fine in Chrome, but it will not work in Mozilla Firefox.

I tried prefixes -webkitand -moz. Without -webkitit it works in Chrome, but with -mozit it does not work properly in 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>

Run codeHide result

The flips up effect does not work in Firefox.