@charset "utf-8";

/*立方体*/
.text {
  display:inline-block;
  position:relative;
  left:50%;
  top:50%;
  transform:translateX(-50%) translateY(-50%);
  font-size:20px;
  color:white;
}
#scene {
  height:200px;
  margin:160px auto 0;
  width:200px;
  perspective:1000px;
}
#boxBase {
  transform-style:preserve-3d;
  height:200px;
  animation: turnAround 10s linear 0s infinite normal none running;
  width:200px;
}
@keyframes turnAround {
  0%{
    transform:rotateX(0deg) rotateY(0deg);
  }
  100%{
    transform:rotateX(360deg) rotateY(360deg);
  }
}
#boxBase > div {
  position:absolute;
  background-color:rgb(100 100 100 / 33%);
  width:198px;
  height:198px;
  cursor: pointer;
}
#boxBase > div:hover {
  background-color:rgba(200, 200, 200, 0.7);
}
#boxBase > div:hover > .text {
  color:black;
  font-weight:bold;
}
#boxBase > .top {
  transform:translateY(100px) rotateX(-90deg);
}
#boxBase > .bottom {
  transform:translateY(-100px) rotateX(90deg);
}
#boxBase > .front {
  transform:translateZ(100px);
}
#boxBase > .back {
  transform:translateZ(-100px) rotateX(180deg);
}
#boxBase > .left {
  transform:translateX(-100px) rotateY(-90deg);
}
#boxBase > .right {
  transform:translateX(100px) rotateY(90deg);
}