.die {
	display: block;
	height: 100px;
	width: 100px;
	transform-style: preserve-3d;
	transform-origin: 50% 50% -50px;
  }

  .die.dieA > div {
	background: #F44336;
	border-color: #f32c1e;
  }

  .die > div {
	border: 4px solid;
	box-sizing: border-box;
	border-radius: 4px;
	height: 100px;
	width: 100px;
	position: relative;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
  }
  .die > div:nth-child(1) {
	transform-origin: 0 100%;
	transform: translateY(-100px) rotateX(90deg);
  }
  .die > div:nth-child(2) {
	transform-origin: 100% 0;
	transform: translateX(-100px) rotateY(-90deg);
  }
  .die > div:nth-child(4) {
	transform-origin: 0 0;
	transform: translateX(100px) rotateY(90deg);
  }
  .die > div:nth-child(5) {
	transform-origin: 0 0;
	transform: translateY(100px) rotateX(-90deg);
  }
  .die > div:nth-child(6) {
	transform-origin: 50% 50%;
	transform: translateZ(-100px) rotateX(180deg);
  }
  .die > div > span {
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	position: absolute;
	background: white;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	transform: translate(-50%, -50%);
  }
  .die > div[value="1"] > span:nth-child(1), .die > div[value="3"] > span:nth-child(3), .die > div[value="5"] > span:nth-child(5) {
	top: 50%;
	left: 50%;
  }
  .die > div[value="2"] > span:nth-child(1), .die > div[value="3"] > span:nth-child(1), .die > div[value="4"] > span:nth-child(1), .die > div[value="5"] > span:nth-child(1), .die > div[value="6"] > span:nth-child(1) {
	top: 20%;
	left: 20%;
  }
  .die > div[value="2"] > span:nth-child(2), .die > div[value="3"] > span:nth-child(2), .die > div[value="4"] > span:nth-child(2), .die > div[value="5"] > span:nth-child(2), .die > div[value="6"] > span:nth-child(2) {
	top: 80%;
	left: 80%;
  }
  .die > div[value="4"] > span:nth-child(3), .die > div[value="5"] > span:nth-child(3), .die > div[value="6"] > span:nth-child(3) {
	top: 20%;
	left: 80%;
  }
  .die > div[value="4"] > span:nth-child(4), .die > div[value="5"] > span:nth-child(4), .die > div[value="6"] > span:nth-child(4) {
	top: 80%;
	left: 20%;
  }
  .die > div[value="6"] > span:nth-child(5) {
	top: 50%;
	left: 20%;
  }
  .die > div[value="6"] > span:nth-child(6) {
	top: 50%;
	left: 80%;
  }
  
  @-webkit-keyframes rotate {
	from {
	  transform: rotateX(0) rotateY(0) rotateZ(0);
	}
	to {
	  transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
  }
  
  @keyframes rotate {
	from {
	  transform: rotateX(0) rotateY(0) rotateZ(0);
	}
	to {
	  transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
  }