用animation制作走马灯先添加元素先给ul设置preserve-3d，然后通过定位使其呈现如图所示效果之后给每个l

先添加元素

<body>
	<div class="box">
			<ul>
				<li><img src="images/1.jpg"/></li>
				<li><img src="images/2.jpg"/></li>
				<li><img src="images/3.jpg"/></li>
				<li><img src="images/4.jpg"/></li>
				<li><img src="images/5.jpg"/></li>
				<li><img src="images/6.jpg"/></li>
				<li><img src="images/7.jpg"/></li>
				<li><img src="images/8.jpg"/></li>
				<li><img src="images/9.jpg"/></li>
				<li><img src="images/10.jpg"/></li>
				<li><img src="images/11.jpg"/></li>
				<li><img src="images/6.jpg"/></li>
			</ul>
		</div>
</body>

先给ul设置preserve-3d，然后通过定位使其呈现如图所示效果

ul{
		margin: 300px auto;
		width:133px;
		height:200px;
		border:1px solid red;
		position:relative;
		transform-style: preserve-3d;	
		transition: 15s;
	}
ul li{
		width:133px;
	    height:200px;
	    list-style: none;
	    position: absolute;
	}

之后给每个li添加偏移旋转，使其位置呈现如图所示效果

ul li:nth-child(1){
		transform: translateX(55px) rotateY(0) translateZ(345px)
	}
	ul li:nth-child(2){
		transform-origin:center;
		transform: translateX(55px) rotateY(30deg) translateZ(345px)
	}
	ul li:nth-child(3){
		transform-origin:center;
		transform: translateX(55px) rotateY(60deg) translateZ(345px)
	}
	ul li:nth-child(4){
		transform-origin:center;
		transform: translateX(55px) rotateY(90deg) translateZ(345px)
	}
	ul li:nth-child(5){
		transform-origin:center;
		transform: translateX(55px) rotateY(120deg) translateZ(345px)
	}
	ul li:nth-child(6){
		transform-origin:center;
		transform: translateX(55px) rotateY(150deg) translateZ(345px)
	}
	ul li:nth-child(7){
		transform-origin:center;
		transform: translateX(55px) rotateY(180deg) translateZ(345px)
	}
	ul li:nth-child(8){
		transform-origin:center;
		transform: translateX(55px) rotateY(210deg) translateZ(345px)
	}
	ul li:nth-child(9){
		transform-origin:center;
		transform: translateX(55px) rotateY(240deg) translateZ(345px)
	}
	ul li:nth-child(10){
		transform-origin:center;
		transform: translateX(55px) rotateY(270deg) translateZ(345px)
	}
	ul li:nth-child(11){
		transform-origin:center;
		transform: translateX(55px) rotateY(300deg) translateZ(345px)
	}
	ul li:nth-child(12){
		transform-origin:center;
		transform: translateX(55px) rotateY(330deg) translateZ(345px)
	}

最后给ul添加hover效果，鼠标滑过时，使其产生动态效果,就是我们想要的了

ul:hover{
		transform: rotateX(45deg) rotateZ(90deg) rotateY(720deg);
		transform-origin: center center 0;
	}