<div class="container">
	<!-- 舞台层 -->
	<div class="stage">
		<!-- 控制层 -->
		<div class="control">
			<!-- 图片层 -->
			<div class="imgWrap">
				<div class="img img1">3</div>
				<div class="img img2">D</div>
				<div class="img img3">视</div>
				<div class="img img4">图</div>
			</div>
		</div>
	</div>
</div>
$imgCount : 4;

.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(0px) 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 * 20%, $i * 0.2);
					transform: rotateY(35 + ($i * 90deg)) translateZ(200px) ;
				}
			}
		}
	}
}

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