为什么在悬停时我的代码中的transform不起作用？

Question

我有一个在中间有孔的分隔，当我在直接悬停时旋转它时，它可以工作；但是当我在将鼠标悬停在另一个分区#btn上时尝试将其旋转时，它将无法正常工作。我不明白为什么？

我使用:after元素制作了孔；

这是我的代码：

/* This Part doesn't work (#btn:hover>.hollowBox) */
#btn:hover>.hollowBox {
  transform: perspective(800px) rotateY(25deg);
}

/* Following part works comment out the upper part and uncomment the code below */
/*.hollowBox:hover{
  transform: perspective(800px) rotateY(25deg);
}*/

.hollowBox {
  background: #ddd;
  position: relative;
  width: 60%;
  height: 40%;
}

.hollowBox:after {
  content: '';
  position: absolute;
  background: #222;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

#btn {
  background: wheat;
  padding: 0.3em
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #222;
}

<div class='hollowBox'></div><br><br>
<div id='btn'>Hover Me</div>