CSS转换仅适用于Chrome？

Question

此代码允许悬停效果transform: rotateX(-20deg);在Chrome上完美运行，但转换风格在Edge和Firefox上是平的。在嵌套元素上应用transform-style: preserve-3d;会将其分散到任何地方，包括Chrome。 （此外，Edge上悬停效果的鼠标位置是方式关闭。）这里发生了什么？

＆＃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);
  /*this breaks it.
  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 a:hover .brick, #grid .brick:hover {
	transform: rotateX(-20deg);
	z-index: 2;
	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;