body,
html {
	width: 100%;
	height: 100%;
	display: flex;
}

$imgCount: 4;

.perspective {
	margin: auto;
	transform-style: preserve-3d;
	perspective: 3000px;
	
}

.container {
	width: 400px;
	height: 400px;
	transform-style: preserve-3d;
	animation: rotate 40s linear infinite;

	.img {
		position: absolute;
		width: 400px;
		height: 400px;
		line-height: 400px;
		text-align: center;
		font-size: 120px;
		top: 0;
		left: 0;
	}
	@for $i from 1 through $imgCount {
		.img:nth-child(#{$i}) {
			background: hsla($i * 30, 50%, $i * 20%, $i * 0.2);
			transform: rotateY(35 + ($i * 90deg)) translateZ(200px);
		}
	}
}

@keyframes rotate {
	0% {
		transform: translateZ(-2000px) rotateY(0deg) rotateZ(30deg);
	}
	50% {
		transform: translateZ(-2000px) rotateY(-360deg) rotateZ(-30deg);
	}
	100% {
		transform: translateZ(-2000px) rotateY(-720deg) rotateZ(30deg);
	}
}