.die {
  transition: transform 0.2s ease;
  width: 60px;
  height: 60px;
  position: relative;
  transform-style: preserve-3d;

  &.init-roll1 {
    transform: rotateY(180deg);
  }
  &.init-roll2 {
    transform: rotateY(90deg);
  }
  &.init-roll3 {
    transform: rotateX(-90deg);
  }
  &.init-roll4 {
    transform: rotateX(90deg);
  }
  &.init-roll5 {
    transform: rotateY(-90deg);
  }
  &.init-roll6 {
    transform: rotateX(0deg) rotateY(0deg);
  }

  &.roll1 {
    transform-style: preserve-3d;
    animation-name: rotate1;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  &.roll2 {
    transform-style: preserve-3d;
    animation-name: rotate2;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  &.roll3 {
    transform-style: preserve-3d;
    animation-name: rotate3;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  &.roll4 {
    transform-style: preserve-3d;
    animation-name: rotate4;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  &.roll5 {
    transform-style: preserve-3d;
    animation-name: rotate5;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  &.roll6 {
    transform-style: preserve-3d;
    animation-name: rotate6;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .face {
    height: 60px;
    width: 60px;
    position: absolute;
    background: #3e6fa0;
  }

  .dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
  }

  .six {
    transform: rotateY(0deg) translateZ(30px);
  }
  .one {
    transform: rotateX(180deg) translateZ(30px);
  }
  .five {
    transform: rotateY(90deg) translateZ(30px);
  }
  .two {
    transform: rotateY(-90deg) translateZ(30px);
  }
  .three {
    transform: rotateX(90deg) translateZ(30px);
  }
  .four {
    transform: rotateX(-90deg) translateZ(30px);
  }

  @keyframes rotate1 {
    0% {
      transform: rotateX(90deg) rotateY(90deg) rotateZ(-90deg) translateX(0);
    }
    10% {
      transform: rotateX(-90deg) rotateY(-90deg) rotateZ(90deg) translateX(0);
    }
    30% {
      transform: rotateX(90deg) rotateY(180deg) rotateZ(-90deg) translateX(0);
    }
    50% {
      transform: rotateX(-180deg) rotateY(90deg) rotateZ(360deg) translateX(0);
    }
    70% {
      transform: rotateX(90deg) rotateY(-180deg) rotateZ(-90deg) translateX(0);
    }
    90% {
      transform: rotateX(-90deg) rotateY(-90deg) rotateZ(90deg) translateX(0);
    }
    100% {
      transform: rotateY(180deg);
    }
  }
  @keyframes rotate2 {
    0% {
      transform: rotateX(-90deg) rotateY(-90deg) rotateZ(360deg) translateX(0);
    }
    10% {
      transform: rotateX(90deg) rotateY(180deg) rotateZ(90deg) translateX(0);
    }
    30% {
      transform: rotateX(90deg) rotateY(-270deg) rotateZ(-90deg) translateX(0);
    }
    50% {
      transform: rotateX(90deg) rotateY(90deg) rotateZ(-360deg) translateX(0);
    }
    70% {
      transform: rotateX(-18deg) rotateY(-180deg) rotateZ(-90deg) translateX(0);
    }
    90% {
      transform: rotateX(180deg) rotateY(-90deg) rotateZ(-360deg) translateX(0);
    }
    100% {
      transform: rotateY(90deg);
    }
  }
  @keyframes rotate3 {
    0% {
      transform: rotateX(-180deg) rotateY(-90deg) rotateZ(90deg) translateX(0);
    }
    10% {
      transform: rotateX(-90deg) rotateY(180deg) rotateZ(-360deg) translateX(0);
    }
    30% {
      transform: rotateX(180deg) rotateY(-270deg) rotateZ(180deg) translateX(0);
    }
    50% {
      transform: rotateX(90deg) rotateY(90deg) rotateZ(-90deg) translateX(0);
    }
    70% {
      transform: rotateX(18deg) rotateY(270deg) rotateZ(180deg) translateX(0);
    }
    90% {
      transform: rotateX(90deg) rotateY(-180deg) rotateZ(360deg) translateX(0);
    }
    100% {
      transform: rotateX(-90deg);
    }
  }
  @keyframes rotate4 {
    0% {
      transform: rotateX(-180deg) rotateY(-90deg) rotateZ(-90deg) translateX(0);
    }
    10% {
      transform: rotateX(270deg) rotateY(-180deg) rotateZ(360deg) translateX(0);
    }
    30% {
      transform: rotateX(180deg) rotateY(270deg) rotateZ(180deg) translateX(0);
    }
    50% {
      transform: rotateX(-90deg) rotateY(90deg) rotateZ(90deg) translateX(0);
    }
    70% {
      transform: rotateX(18deg) rotateY(-270deg) rotateZ(180deg) translateX(0);
    }
    90% {
      transform: rotateX(-90deg) rotateY(180deg) rotateZ(-360deg) translateX(0);
    }
    100% {
      transform: rotateX(90deg);
    }
  }
  @keyframes rotate5 {
    0% {
      transform: rotateX(-180deg) rotateY(-90deg) rotateZ(-180deg) translateX(0);
    }
    10% {
      transform: rotateX(270deg) rotateY(180deg) rotateZ(-360deg) translateX(0);
    }
    30% {
      transform: rotateX(180deg) rotateY(270deg) rotateZ(180deg) translateX(0);
    }
    50% {
      transform: rotateX(-90deg) rotateY(90deg) rotateZ(-90deg) translateX(0);
    }
    70% {
      transform: rotateX(18deg) rotateY(270deg) rotateZ(180deg) translateX(0);
    }
    90% {
      transform: rotateX(90deg) rotateY(180deg) rotateZ(-360deg) translateX(0);
    }
    100% {
      transform: rotateY(-90deg);
    }
  }
  @keyframes rotate6 {
    0% {
      transform: rotateX(270deg) rotateY(-90deg) rotateZ(180deg) translateX(0);
    }
    10% {
      transform: rotateX(180deg) rotateY(90deg) rotateZ(360deg) translateX(0);
    }
    30% {
      transform: rotateX(180deg) rotateY(90deg) rotateZ(-180deg) translateX(0);
    }
    50% {
      transform: rotateX(90deg) rotateY(270deg) rotateZ(-90deg) translateX(0);
    }
    70% {
      transform: rotateX(18deg) rotateY(-180deg) rotateZ(90deg) translateX(0);
    }
    90% {
      transform: rotateX(-90deg) rotateY(180deg) rotateZ(-360deg) translateX(0);
    }
    100% {
      transform: rotateX(0deg) rotateY(0deg);
    }
  }
}
