* {
	margin: 0;
	padding: 0;
}

body {
	perspective: none;
	perspective-origin: 50% 50%;
}

.warp {
	width: 500px;
	height: 500px;
	margin: 100px auto;
	
	position: relative;
	
	transform-style: preserve-3d;
	
	transform: rotateX(45deg) rotateY(45deg);
	
	animation: play 5s linear infinite;
}

.box {
	width: 200px;
	height: 200px;
	border: 2px solid #ccc;
	
	text-align: center;
	line-height: 200px;
	font-size: 150px;
	font-weight: bold;
	color: #fff;
	
	position: absolute;
	top: 150px;
	left: 150px;
}

.box1 {
	background: rgba(135,135,135,.3);
	transform: rotateY(90deg) translateZ(100px);
}

.box2 {
	background: rgba(135,0,255,.3);
	transform: rotateY(90deg) translateZ(-100px);
}

.box3 {
	background: rgba(255,125,125,.3);
	transform: rotateX(90deg) translateZ(-100px);
}

.box4 {
	background: rgba(125,255,125,.3);
	transform: rotateX(90deg) translateZ(100px);
}

.box5 {
	background: rgba(30,150,189,.3);
	transform: translateZ(100px);
}

.box6 {
	background: rgba(169,150,189,.3);
	transform: translateZ(-100px);
}

@keyframes play {
	from{ transform: rotateX(0) rotateY(0) rotateZ(0);}
	to {transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);}
}