<div class="cube">
  <div>코터틀</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

body {
  background-color: black;
  height: 100vh;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: 
    rotateX(-20deg)
    rotateY(-140deg)
    translateZ(0);
  animation: rotate 8000ms linear infinite;
}

.cube div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  opacity: 0.75;
  color: #fff;
}

.cube div:nth-child(1) {
  background-color: #ffcc80;
  transform-origin: center top;
  transform: 
    rotateX(90deg)
    translateY(-100px);
  animation: top 4000ms ease-in-out 8000ms infinite;
}

.cube div:nth-child(2) {
  background-color: #ffb74d;
  transform-origin: center bottom;
  transform: 
    rotateX(-90deg)
    translateY(100px);
  animation: bottom 4000ms ease-in-out 8000ms infinite;
}

.cube div:nth-child(3) {
  background-color: #ffa726;
  transform-origin: left center;
  transform: 
    rotateY(-90deg)
    translateX(-100px);
  animation: left 4000ms ease-in-out 8000ms infinite;
}

.cube div:nth-child(4) {
  background-color: #ff9800;
  transform-origin: right center;
  transform: 
    rotateY(90deg)
    translateX(100px);
  animation: right 4000ms ease-in-out 8000ms infinite;
}

.cube div:nth-child(5) {
  background-color: #fb8c00;
  transform-origin: center center;
  transform: rotateX(0deg);
  animation: front 4000ms ease-in-out 8000ms infinite;
}

.cube div:nth-child(6) {
  background-color: #ffb74d;
  transform-origin: center center;
  transform: 
    rotateY(180deg)
    translateZ(100px);
  animation: back 4000ms ease-in-out 8000ms infinite;
}

@keyframes rotate {
  0% {transform: rotateX(0) rotatey(0) rotateZ(0) translateZ(0)}
  100% {transform: rotateX(360deg) rotatey(360deg) rotateZ(360deg) translateZ(0)}
}

@keyframes top {
  0% {transform: rotateX(90deg) translateY(-100px) translateZ(0)}
  50% {transform: rotateX(90deg) translateY(-100px) translateZ(100px)}
  100% {transform: rotateX(90deg) translateY(-100px) translateZ(0)}
}

@keyframes bottom {
  0% {transform: rotateX(-90deg) translateY(100px) translateZ(0)}
  50% {transform: rotateX(-90deg) translateY(100px) translateZ(100px)}
  100% {transform: rotateX(-90deg) translateY(100px) translateZ(0)}
}

@keyframes left {
  0% {transform: rotateY(-90deg) translateX(-100px) scaley(1)}
  50% {transform: rotateY(-90deg) translateX(-100px) scaley(3)}
  100% {transform: rotateY(-90deg) translateX(-100px) scaley(1)}
}

@keyframes right {
  0% {transform: rotateY(90deg) translateX(100px) scaley(1)}
  50% {transform: rotateY(90deg) translateX(100px) scaley(3)}
  100% {transform: rotateY(90deg) translateX(100px) scaley(1)}
}

@keyframes front {
  0% {transform: rotateX(0deg) scaleY(1)}
  50% {transform: rotateX(0deg) scaleY(3)}
  100% {transform: rotateX(0deg) scaleY(1)}
}

@keyframes back {
  0% {transform: rotateY(180deg) translateZ(100px) scaleY(1)}
  50% {transform: rotateY(180deg) translateZ(100px) scaleY(3)}
  100% {transform: rotateY(180deg) translateZ(100px) scaleY(1)}
}