css动画dmeo

用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);
}