H5前端,正方体动画效果

简单的正方体动画

简单的前端H5页面动画效果，量少易懂，本人偏爱狗图，有想要的留言呐！
以下是代码不分

html代码

<div class="wrap">
	<ul>
		<li><img src="img/p1.jpg"></li>
		<li><img src="img/p1.jpg"></li>
		<li><img src="img/p1.jpg"></li>
		<li><img src="img/p1.jpg"></li>
		<li><img src="img/p1.jpg"></li>
		<li><img src="img/p1.jpg"></li>
	</ul>
</div>	

css

*{margin: 0;padding: 0;}
li{list-style: none;}
.wrap{
	width: 300px;            
	height: 300px;            
	margin: 200px auto;
   }
ul{            
	width: 300px;            
	height: 300px;            
	position: relative;       
	transform-style: preserve-3d;
	transform: rotateY(45deg) rotateX(30deg);            
  	animation: play 8s infinite;       
   }
 img{            
	 width: 100%;            
	 height: 100%;       
  }
  li{   
	width: 300px;            
	height: 300px;           
	border: 5px solid #ccc;           
	font-size: 50px;      
	text-align: center;            
	line-height: 300px;            
	position: absolute;            
	background-color: pink;        
  }
  ul:hover li:nth-child(1){
	transform: rotateX(90deg) translateZ(155px);
	transition: 1s;
  }
  ul:hover li:nth-child(2){
  	transform: rotateX(-90deg) translateZ(155px);
  	transition: 1s;
  }
  ul:hover li:nth-child(3){
  	transition: 1s;
  	transform: rotateY(90deg) translateZ(155px);
  }
  ul:hover li:nth-child(4){
  	transition: 1s;
  	transform: rotateY(-90deg) translateZ(155px);
  }
  ul:hover li:nth-child(5){
  	transition: 1s;
  	transform: translateZ(155px);
  }
  @keyframes play{
  	0%{transform: rotate3d(0, 0, 0, 0)}
  	15%{transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg)}
  	30%{transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg)}
  	45%{transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg)}
  	60%{transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg)}
  	75%{transform: rotateX(270deg) rotateY(0deg) rotateZ(90deg)}
  	100%{transform: rotateX(0deg) rotateY(270deg) rotateZ(90deg)}
  }

图片:
小白不易，大佬轻喷