.cube {
  position: relative;
  width: 170px;
  height: 170px;
  transform-style: preserve-3d;
  transform: perspective(800px);
  margin: 0 auto 80px;
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

.cube__face p {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: .5px;
  font-family: Arial, Helvetica, "Microsoft JhengHei", sans-serif;
}
.cube__face--top p{
  transform: rotate(-90deg);
}
.cube__face--bottom P {
  font-size: 40px;
}

/* 6 面定位 */
.cube__face--front  { transform: rotateY(   0deg ) translateZ(85px); }
.cube__face--back   { transform: rotateY( 180deg ) translateZ(85px); }
.cube__face--right  { transform: rotateY(  90deg ) translateZ(85px); }
.cube__face--left   { transform: rotateY( -90deg ) translateZ(85px); }
.cube__face--top    { transform: rotateX(  90deg ) translateZ(85px); }
.cube__face--bottom { transform: rotateX( -90deg ) translateZ(85px); }

@keyframes cubeSpin {
  0%   { transform: perspective(800px) rotateX(0deg)   rotateY(0deg); }
  7%   { transform: perspective(800px) rotateX(0deg)   rotateY(0deg); }
  38%  { transform: perspective(800px) rotateX(0deg)  rotateY(-90deg); }
  69%  { transform: perspective(800px) rotateX(-90deg)  rotateY(-90deg); }
  100% { transform: perspective(800px) rotateX(90deg)   rotateY(0deg); }
}

.cube {
  animation: cubeSpin 3s linear 1 forwards;
}