用css做了一下旋转图片的效果
html
<div id="main">
<img src="images/120.jpg" alt="" class="box1 box">
<img src="images/121.jpg" alt="" class="box2 box">
<img src="images/122.jpg" alt="" class="box3 box">
<img src="images/123.jpg" alt="" class="box4 box">
<img src="images/124.jpg" alt="" class="box5 box">
<img src="images/125.jpg" alt="" class="box6 box">
<img src="images/126.jpg" alt="" class="box7 box">
<img src="images/127.jpg" alt="" class="box8 box">
<img src="images/128.jpg" alt="" class="box9 box">
</div>
css
*{
padding: 0%;
margin: 0%;
}
body{
perspective: 800px;
padding-top: 100px;
}
#main{
width: 1200px;
height: 800px;
/* background-color: green; */
margin: 0 auto;
position: relative;
/* animation: identifier 5s linear infinite; */
transform: rotateX(0deg);
transform-style: preserve-3d;
}
.box{
width: 300px;
height: 400px;
position: absolute;
top: 150px;
left: 350px;
transition: transform 2s;
}
#main img:nth-child(1){
transform: translateZ(500px);
}
#main img:nth-child(2){
transform: rotateY(40deg) translateZ(500px);
}
#main img:nth-child(3){
transform: rotateY(80deg) translatez(500px);
}
#main img:nth-child(4){
transform: rotateY(120deg) translatez(500px);
}
#main img:nth-child(5){
transform: rotateY(160deg) translatez(500px);
}
#main img:nth-child(6){
transform: rotateY(200deg) translatez(500px);
}
#main img:nth-child(7){
transform: rotateY(240deg) translatez(500px);
}
#main img:nth-child(8){
transform: rotateY(280deg) translatez(500px);
}
#main img:nth-child(9){
transform: rotateY(320deg) translatez(500px);
}
@keyframes identifier {
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
#main:hover img:nth-child(1){
transform: translateZ(600px);
}
#main:hover img:nth-child(2){
transform: rotateY(40deg) translateZ(600px);
}
#main:hover img:nth-child(3){
transform: rotateY(80deg) translatez(600px);
}
#main:hover img:nth-child(4){
transform: rotateY(120deg) translatez(600px);
}
#main:hover img:nth-child(5){
transform: rotateY(160deg) translatez(600px);
}
#main:hover img:nth-child(6){
transform: rotateY(200deg) translatez(600px);
}
#main:hover img:nth-child(7){
transform: rotateY(240deg) translatez(600px);
}
#main:hover img:nth-child(8){
transform: rotateY(280deg) translatez(600px);
}
#main:hover img:nth-child(9){
transform: rotateY(320deg) translatez(600px);
}