SOURCE

<div class="ava">
  <div class="ava1"></div>
  <div class="ava2"></div>
  <div class="ava3"></div>
</div>

<div class="run-light">
	<div class="container">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535829103999&di=e88ae65e5f29a044def01fbe39f2b5e4&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F51%2F75%2F16pic_5175299_b.jpg" alt="" />
	</div>
	<div class="container">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535829103999&di=e88ae65e5f29a044def01fbe39f2b5e4&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F51%2F75%2F16pic_5175299_b.jpg" alt="" />
	</div>
	<div class="container">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535829103999&di=e88ae65e5f29a044def01fbe39f2b5e4&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F51%2F75%2F16pic_5175299_b.jpg" alt="" />
	</div>
	<div class="container">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535829103999&di=e88ae65e5f29a044def01fbe39f2b5e4&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F51%2F75%2F16pic_5175299_b.jpg" alt="" />
	</div>
	<div class="container">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535829103999&di=e88ae65e5f29a044def01fbe39f2b5e4&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F51%2F75%2F16pic_5175299_b.jpg" alt="" />
	</div>
	<div class="container">
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535829103999&di=e88ae65e5f29a044def01fbe39f2b5e4&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F51%2F75%2F16pic_5175299_b.jpg" alt="" />
	</div>
</div>

.ava {
  height: 100px;
  position: relative;
}
.ava div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
}

.ava1 {
  background: red;
  transform-style: preserve-3d;
}
.ava2 {
  left: 30px;
  background: blue;
}
.ava3 {
  top: 30px;
  background: yellow;
}
.ava4 {
  top: 30px;
  left: 30px;
  background: black;
}

.perspective1 {
  transform: perspective(200px) translateZ(10px);
  width: 500px;
  height: 300px;
  background: #8e2e9e;
}

.perspective2 {
  perspective: 300px;
  width: 500px;
  height: 300px;
  background: #8e2e;
}

@keyframes run {
  from  { transform: rotateY(0deg) }
  to { transform: rotateY(360deg) }
}

	.run-light {
		width: 1000px;
		height: 500px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 200px;
		perspective: 1000px;
		transform-style: preserve-3d;
	} 
	.container {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -100px;
		margin-top: -50px;
	}
	.container:nth-child(1) {  transform: rotateY(0deg) translateZ(200px); }
	.container:nth-child(2) {  transform: rotateY(60deg) translateZ(200px); }
	.container:nth-child(3) {  transform: rotateY(120deg) translateZ(200px); }
	.container:nth-child(4) {  transform: rotateY(180deg) translateZ(200px); }
	.container:nth-child(5) {  transform: rotateY(240deg) translateZ(200px); }
	.container:nth-child(6) {  transform: rotateY(300deg) translateZ(200px); }
    img {
    	width: 200px;
    	height: 100px;
  	}
}