* {
  box-sizing: border-box; }

.container {
  width: 18.75em;
  height: 18.75em;
  perspective: 37.5em;
  margin: 6.25em auto 0 auto; }

.cube {
  width: 18.75em;
  height: 18.75em;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-150px);
  transition: transform 3s ease-out; }
  .cube .one {
    transform: rotateY(0deg) translateZ(150px); }
    .cube .one .dots-container .dot:nth-of-type(1) {
      grid-area: five; }
  .cube .two {
    transform: rotateY(90deg) translateZ(150px); }
    .cube .two .dots-container .dot:nth-of-type(1) {
      grid-area: one; }
    .cube .two .dots-container .dot:nth-of-type(2) {
      grid-area: nine; }
  .cube .three {
    transform: rotateX(90deg) translateZ(150px); }
    .cube .three .dots-container .dot:nth-of-type(1) {
      grid-area: one; }
    .cube .three .dots-container .dot:nth-of-type(2) {
      grid-area: five; }
    .cube .three .dots-container .dot:nth-of-type(3) {
      grid-area: nine; }
  .cube .four {
    transform: rotateX(-90deg) translateZ(150px); }
    .cube .four .dots-container .dot:nth-of-type(1) {
      grid-area: one; }
    .cube .four .dots-container .dot:nth-of-type(2) {
      grid-area: three; }
    .cube .four .dots-container .dot:nth-of-type(3) {
      grid-area: seven; }
    .cube .four .dots-container .dot:nth-of-type(4) {
      grid-area: nine; }
  .cube .five {
    transform: rotateY(-90deg) translateZ(150px); }
    .cube .five .dots-container .dot:nth-of-type(1) {
      grid-area: one; }
    .cube .five .dots-container .dot:nth-of-type(2) {
      grid-area: three; }
    .cube .five .dots-container .dot:nth-of-type(3) {
      grid-area: five; }
    .cube .five .dots-container .dot:nth-of-type(4) {
      grid-area: seven; }
    .cube .five .dots-container .dot:nth-of-type(5) {
      grid-area: nine; }
  .cube .six {
    transform: rotateY(180deg) translateZ(150px); }
    .cube .six .dots-container .dot:nth-of-type(1) {
      grid-area: one; }
    .cube .six .dots-container .dot:nth-of-type(2) {
      grid-area: three; }
    .cube .six .dots-container .dot:nth-of-type(3) {
      grid-area: four; }
    .cube .six .dots-container .dot:nth-of-type(4) {
      grid-area: six; }
    .cube .six .dots-container .dot:nth-of-type(5) {
      grid-area: seven; }
    .cube .six .dots-container .dot:nth-of-type(6) {
      grid-area: nine; }
  .cube.odd.roll-one {
    /* x = 0 y = 0 */
    transform: translateZ(-150px) rotateX(720deg) rotateY(360deg); }
  .cube.odd.roll-two {
    /* x = 0 y = -90 */
    transform: translateZ(-150px) rotateX(360deg) rotateY(630deg); }
  .cube.odd.roll-three {
    /* x = -90 y = 0 */
    transform: translateZ(-150px) rotateX(630deg) rotateY(720deg); }
  .cube.odd.roll-four {
    /* x = 90 y = 0 */
    transform: translateZ(-150px) rotateX(450deg) rotateY(720deg); }
  .cube.odd.roll-five {
    /* x = 0 y = 90 */
    transform: translateZ(-150px) rotateX(720deg) rotateY(450deg); }
  .cube.odd.roll-six {
    /* x = 0 y = -180 */
    transform: translateZ(-150px) rotateX(360deg) rotateY(900deg); }
  .cube.even.roll-one {
    /* x = 0 y = 0 */
    transform: translateZ(-150px) rotateX(-720deg) rotateY(-360deg); }
  .cube.even.roll-two {
    /* x = 0 y = -90 */
    transform: translateZ(-150px) rotateX(-720deg) rotateY(-450deg); }
  .cube.even.roll-three {
    /* x = -90 y = 0 */
    transform: translateZ(-150px) rotateX(-450deg) rotateY(-720deg); }
  .cube.even.roll-four {
    /* x = 90 y = 0 */
    transform: translateZ(-150px) rotateX(-630deg) rotateY(-720deg); }
  .cube.even.roll-five {
    /* x = 0 y = 90 */
    transform: translateZ(-150px) rotateX(-360deg) rotateY(-630deg); }
  .cube.even.roll-six {
    /* x = 0 y = -180 */
    transform: translateZ(-150px) rotateX(-360deg) rotateY(-900deg); }

.side {
  width: 18.75em;
  height: 18.75em;
  position: absolute;
  background-color: antiquewhite;
  border: 2px solid black;
  text-align: center;
  border-radius: 10px; }

.dots-container {
  padding: 2.5em 0 0 2.5em;
  display: grid;
  grid-template-rows: 5em 4.375em 5em;
  grid-template-columns: 5em 4.375em 5em;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  grid-template-areas: "one two three"
 "four five six"
 "seven eight nine"; }

.dot {
  height: 2.5em;
  width: 2.5em;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  position: relative; }