BODY {
			perspective: 1000px;
			perspective-origin: center 250px;
			}

	
	.container {
	  width: 50px;
	  height: 50px;
	  margin: 200px auto 0;
	  border: 2px dotted white;
	  transform-style: preserve-3d;
	  animation: rotate 10s infinite linear;
	  }

	.side {
	  position: absolute;
	  width:150px;
	  height:150px;
	  border: 1px solid black;
	  opacity: .5;
	  }

	.back {
	  transform: translateZ(-75px);
	  background: orange;
	  }
	.left {
	  transform: translateX(-75px) rotateY(90deg);
	  background: green;
	  }
	.right {
	  transform: translateX(75px) rotateY(90deg);
	  background: yellow;
	  }
	.top {
	  transform: translateY(-75px) rotateX(90deg);
	  background: blue;
	  }
	.bottom {
	  transform: translateY(75px) rotateX(90deg);
	  background: red;
	  }
	  .front {
	  transform: translateZ(75px);
	  background: pink;
	  }

	@keyframes rotate {
	  100% {
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	  }
	}
	.dot {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: red;
	margin:50px;
  }