.cubeWrap {
	-webkit-perspective: 800px;
			perspective: 800px;
	width: 300px;
	overflow: hidden;
	/* position: absolute; */
	-webkit-animation: bouncy 2s ease forwards;
			animation: bouncy 2s ease forwards;
  }
  
  .cube {
	margin: 3em auto;
	width: 6em;
	height: 6em;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -3em;
			transform-origin: 50% 50% -3em;
	position: relative;
	-webkit-animation: spin 4s linear infinite;
			animation: spin 4s linear infinite;
	-webkit-transform: rotateX(-50deg) rotateY(405deg);
			transform: rotateX(-50deg) rotateY(405deg);
  }
  .cube div {
	position: absolute;
	width: 6em;
	height: 6em;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
  }
  
  .faces1::before,
  .faces1::after,
  .faces2::before,
  .faces2::after {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
  }
  
  .faces1::before,
  .faces2::before {
	-webkit-transform: rotateY(90deg);
			transform: rotateY(90deg);
	-webkit-transform-origin: 0 50%;
			transform-origin: 0 50%;
	background-color: purple;
  }
  
  .faces2 {
	-webkit-transform: rotateX(180deg) translateZ(6em);
			transform: rotateX(180deg) translateZ(6em);
  }
  
  .faces2::before {
	background-color: orange;
	-webkit-transform: rotateY(-90deg);
			transform: rotateY(-90deg);
	-webkit-transform-origin: 100% 50%;
			transform-origin: 100% 50%;
  }
  
  .faces1::after,
  .faces2::after {
	-webkit-transform: rotateX(-90deg);
			transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
			transform-origin: 50% 0;
	background-color: red;
  }
  
  .faces1 {
	background-color: #eee;
  }
  
  .faces2 {
	background-color: #f3f3f3;
  }
  
  .faces1::before {
	background-color: #f8f8f8;
  }
  
  .faces2::before {
	background-color: white;
  }
  
  .faces1::after {
	background-color: #e9e9e9;
  }
  
  .faces2::after {
	background-color: #e4e4e4;
  }
  
  @-webkit-keyframes spin {
	0% {
	  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
			  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	100% {
	  -webkit-transform: rotateX(720deg) rotateY(360deg) rotateZ(0deg);
			  transform: rotateX(720deg) rotateY(360deg) rotateZ(0deg);
	}
  }
  
  @keyframes spin {
	0% {
	  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
			  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	100% {
	  -webkit-transform: rotateX(720deg) rotateY(360deg) rotateZ(0deg);
			  transform: rotateX(720deg) rotateY(360deg) rotateZ(0deg);
	}
  }
  @-webkit-keyframes bouncy {
	/* up */
	0% {
	  -webkit-transform: translateY(-600px) scale(0.8, 1.2);
			  transform: translateY(-600px) scale(0.8, 1.2);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	30% {
	  -webkit-transform: translateY(0) scale(0.8, 1.2);
			  transform: translateY(0) scale(0.8, 1.2);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* floor */
	32% {
	  -webkit-transform: translateY(0) scale(1, 0.8);
			  transform: translateY(0) scale(1, 0.8);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* up */
	45% {
	  -webkit-transform: translateY(-100px) scale(0.9, 1.1);
			  transform: translateY(-100px) scale(0.9, 1.1);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	60% {
	  -webkit-transform: translateY(0) scale(0.9, 1.1);
			  transform: translateY(0) scale(0.9, 1.1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* floor */
	62% {
	  -webkit-transform: translateY(0) scale(1, 0.9);
			  transform: translateY(0) scale(1, 0.9);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* up */
	70% {
	  -webkit-transform: translateY(-30px) scale(0.9, 1.1);
			  transform: translateY(-30px) scale(0.9, 1.1);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	80% {
	  -webkit-transform: translateY(0) scale(1, 1);
			  transform: translateY(0) scale(1, 1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* floor */
	82% {
	  -webkit-transform: translateY(0) scale(1, 0.95);
			  transform: translateY(0) scale(1, 0.95);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* up */
	85% {
	  -webkit-transform: translateY(-10px) scale(0.98, 1.02);
			  transform: translateY(-10px) scale(0.98, 1.02);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	90% {
	  -webkit-transform: translateY(0) scale(1, 1);
			  transform: translateY(0) scale(1, 1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
  }
  @keyframes bouncy {
	/* up */
	0% {
	  -webkit-transform: translateY(-600px) scale(0.8, 1.2);
			  transform: translateY(-600px) scale(0.8, 1.2);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	30% {
	  -webkit-transform: translateY(0) scale(0.8, 1.2);
			  transform: translateY(0) scale(0.8, 1.2);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* floor */
	32% {
	  -webkit-transform: translateY(0) scale(1, 0.8);
			  transform: translateY(0) scale(1, 0.8);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* up */
	45% {
	  -webkit-transform: translateY(-100px) scale(0.9, 1.1);
			  transform: translateY(-100px) scale(0.9, 1.1);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	60% {
	  -webkit-transform: translateY(0) scale(0.9, 1.1);
			  transform: translateY(0) scale(0.9, 1.1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* floor */
	62% {
	  -webkit-transform: translateY(0) scale(1, 0.9);
			  transform: translateY(0) scale(1, 0.9);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* up */
	70% {
	  -webkit-transform: translateY(-30px) scale(0.9, 1.1);
			  transform: translateY(-30px) scale(0.9, 1.1);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	80% {
	  -webkit-transform: translateY(0) scale(1, 1);
			  transform: translateY(0) scale(1, 1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* floor */
	82% {
	  -webkit-transform: translateY(0) scale(1, 0.95);
			  transform: translateY(0) scale(1, 0.95);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
	/* up */
	85% {
	  -webkit-transform: translateY(-10px) scale(0.98, 1.02);
			  transform: translateY(-10px) scale(0.98, 1.02);
	  -webkit-animation-timing-function: ease-in;
			  animation-timing-function: ease-in;
	}
	/* floor */
	90% {
	  -webkit-transform: translateY(0) scale(1, 1);
			  transform: translateY(0) scale(1, 1);
	  -webkit-animation-timing-function: ease-out;
			  animation-timing-function: ease-out;
	}
  }
  