正方形旋转

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/wjj131419/article/details/102717809

在这里插入代码片


<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>	
*{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)}
  }