我如何使用z-index来模拟芯片跌落通过一个连接四个板，给它一个3d效果？

<div class="board"></div>
<div class="board"></div>
<div class="board"></div>
<div class="board"></div>
<div class="chip"></div>

.board {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.board:nth-child(1) {
  top: 0;
  left: 0;
}

.board:nth-child(2) {
  top: 0;
  right: 0;
}

.board:nth-child(3) {
  bottom: 0;
  left: 0;
}

.board:nth-child(4) {
  bottom: 0;
  right: 0;
}

.chip {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: transform 1s;
}

.chip:hover {
  transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
}