<div class="container">
	<!-- 舞台层 -->
	<div class="stage">
		<!-- 控制层 -->
		<div class="control">
			<!-- 图片层 -->
			<div class="imgWrap">
				<div class="img img1">1</div>
				<div class="img img2">2</div>
				<div class="img img3">3</div>
				<div class="img img4">4</div>
				<div class="img img5">5</div>
				<div class="img img6">6</div>
				<div class="img img7">7</div>
				<div class="img img8">8</div>
			</div>
		</div>
	</div>
</div>
$imgCount : 8;

.container{
	position:relative;
}

.stage{
	position:relative;
	width:800px;
	height:400px;
	margin:0 auto;
	perspective:2000px;
	transform-style: preserve-3d;
	
	.control{
		position:relative;
		width:100%;
		height:100%;
		transform-style: preserve-3d;
		transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
		animation:rotate 40s linear infinite;
		
		.imgWrap{
			position:absolute;
			width:400px;
			height:400px;
			top:50%;
			left:50%;
			transform:translate(-50%, -50%);
			transform-style: preserve-3d;
			
			.img{
				position:absolute;
				width:400px;
				height:400px;
				line-height:400px;
				text-align:center;
				font-size:120px;
				top:0;
				left:0;
				transform-style: preserve-3d;
				transform-origin: 50% 50% 0px;
			}
			@for $i from 1 through $imgCount{
				.img#{$i}{
					background:hsla($i * 30, 50%, $i * 10%, $i * 0.1);
					transform: rotateY(35 + ($i * 45deg)) translateZ(482.84px) ;
				}
			}
		}
	}
}

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