body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #333;
  overflow: hidden;
}

.cube-container {
  /* perspective: 1000px; */
  perspective-origin: 50% 50%; /* 设置视角中心 */
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center center; /* 设置旋转中心 */
  transform: rotateX(0deg) rotateY(0deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 1px solid #ccc;
  box-sizing: border-box;
  transform-origin: center center;
}

.front  { transform: translateZ(150px); background-color: rgba(241, 190, 190, 0.9);}  /* 增加 translateZ 值 */
.back   { transform: rotateY(180deg) translateZ(150px); background-color: rgba(238, 241, 190, 0.9);}
.left   { transform: rotateY(-90deg) translateZ(150px); background-color: rgba(191, 240, 189, 0.9);}
.right  { transform: rotateY(90deg) translateZ(150px); background-color: rgba(190, 241, 227, 0.9);}
.top    { transform: rotateX(90deg) translateZ(150px); background-color: rgba(190, 218, 241, 0.9);}
.bottom { transform: rotateX(-90deg) translateZ(150px); background-color: rgba(229, 181, 236, 0.9);}

.face div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  font-size: 20px;
  color: #000;
  cursor: pointer;
}
/* 
.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); } */