/* ʱ´úJava - https://NowJava.com */
*{
	padding: 0;
	margin: 0;
}
.content {
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	width: 300px;
	transform-style: preserve-3d;
	transform: rotateX(45deg) rotateZ(45deg);
}
.n1{
	float: left;
	position: relative;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	animation: test 1s infinite;
	/*box-shadow: 200px 200px 25px rgba(0,0,0,0.2)*/
}
.a1,
.a2,
.a3{
	position: absolute;
	width: 100px;
	height: 100px;
}
.a1 {
	background-color: #05afd1;
}
.a2 {
	background-color: #049dbc;
	transform:translate3d(50px,0,-50px) rotateY(90deg);
}
.a3 {
	background-color: #048ca7;
	transform:translate3d(0px,50px,-50px) rotateX(90deg);
}
.n1:nth-child(2) {
	animation-delay : 0.05s;
}
.n1:nth-child(3) {
	animation-delay : 0.1s;
}
.n1:nth-child(4) {
	animation-delay : 0.15s;
}
.n1:nth-child(5) {
	animation-delay : 0.2s;
}
.n1:nth-child(6) {
	animation-delay : 0.25s;
}
.n1:nth-child(7) {
	animation-delay : 0.3s;
}
.n1:nth-child(8) {
	animation-delay : 0.35s;
}
.n1:nth-child(9) {
	animation-delay : 0.4s;
}
@keyframes test {
	0%{
		transform: translateZ(0px);
	}
	50%{
		transform: translateZ(200px);
	}
	100%{
		transform: translateZ(0px);
	}

}