<style>
ul{
width:100px;
height: 150px;
border: 1px solid 2px;
margin: 100px auto;
position: relative;
}
ul img{
position: absolute;
top: 0;
transform-origin:center bottom;
transition: all 2s;
}
ul:hover img:nth-child(1){
transform: rotate(-60deg);
}
ul:hover img:nth-child(2){
transform: rotate(-50deg);
}
ul:hover img:nth-child(3){
transform: rotate(-40deg);
}
ul:hover img:nth-child(4){
transform: rotate(-30deg);
}
ul:hover img:nth-child(5){
transform: rotate(-20deg);
}
ul:hover img:nth-child(6){
transform: rotate(-10deg);
}
ul:hover img:nth-child(7){
transform: rotate(0deg);
}
ul:hover img:nth-child(8){
transform: rotate(10deg);
}
ul:hover img:nth-child(9){
transform: rotate(20deg);
}
ul:hover img:nth-child(10){
transform: rotate(30deg);
}
ul:hover img:nth-child(11){
transform: rotate(40deg);
}
ul:hover img:nth-child(12){
transform: rotate(50deg);
}
ul:hover img:nth-child(13){
transform: rotate(60deg);
}
</style>
</head>
<body>
<ul class="box">
<img src="c-1.png" alt="">
<img src="c-2.png" alt="">
<img src="c-3.png" alt="">
<img src="c-4.png" alt="">
<img src="c-5.png" alt="">
<img src="c-6.png" alt="">
<img src="c-7.png" alt="">
<img src="c-8.png" alt="">
<img src="c-9.png" alt="">
<img src="c-10.png" alt="">
<img src="c-11.png" alt="">
<img src="c-12.png" alt="">
<img src="c-13.png" alt="">
</ul>
</body>