*{margin:0;padding:0;}
.box{
		width: 300px;
		height: 300px;
		position: relative;
		margin: 100px;
		transform: rotateX(30deg) rotateY(-30deg);
		transform-style: preserve-3d;
  	animation: spin 5s infinite linear;
	}
	.box:after{
		content: ".";
		height: 0;
		clear: both;
		overflow: hidden;
		display: block;
		visibility: hidden;
	}
	.box a{
		text-decoration: none;
		text-align: center;
		line-height: 200px;
		font-size: 35px;
		font-weight: bold;
		color: black;
		position: absolute;
		display: block;
		width: 200px;
		height: 200px;
		background: red;
		opacity: .4;
		transform-style: preserve-3d;
	}
	.box a:nth-child(1){
		background: #fe04ef;
		transform: translateZ(-100px);
	}
	.box a:nth-child(2){
		background: #0497fe;
		transform: translateZ(100px);
	}
	.box a:nth-child(3){
		background: #04fefb;
		transform: rotateY(90deg) translateZ(-100px);
	}
	.box a:nth-child(4){
		background: #fe2d04;
		transform: rotateY(-90deg) translateZ(-100px);
	}
	.box a:nth-child(5){
		background: #effe04;
		transform: rotateX(-90deg) translateZ(-100px);
	}
	.box a:nth-child(6){
		background: #04fe56;
		transform: rotateX(90deg) translateZ(-100px);
	}

@keyframes spin {
  from {
    transform: rotateX(-10deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-10deg) rotateY(360deg);
  }
}