#square2 .circle {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15%;
	height: 15%;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform-origin: 50% 50%;
	transform: translate(-50%, -50%);
	animation: circleRotate1 2s linear infinite forwards;
}

@keyframes circleRotate1 {
	0% {
		transform: translate(-50%, -50%) rotateY(0) rotateX(0);
	}
	100% {
		transform: translate(-50%, -50%) rotateY(180deg) rotateX(180deg);
	}
}

@keyframes circleRotate2 {
	0% {
		transform: translate(-50%, -50%) rotateZ(0) rotateY(0);
	}
	100% {
		transform: translate(-50%, -50%) rotateZ(180deg) rotateY(180deg);
	}
}

#square2 #circle2 {
	width: 30%;
	height: 30%;
	animation-name: circleRotate2;
	animation-delay: 0.2s;
}

#square2 #circle3 {
	width: 45%;
	height: 45%;
	animation-delay: 0.4s;
}

#square2 #circle4 {
	width: 60%;
	height: 60%;
	animation-name: circleRotate2;
	animation-delay: 0.6s;
}

#square2 #circle5 {
	width: 75%;
	height: 75%;
	animation-delay: 0.8s;
}

#square2 #circle6 {
	width: 90%;
	height: 90%;
	animation-name: circleRotate2;
	animation-delay: 1s;
}