css旋转问题，求大神来解啊

Question

这是源代码
<div class="movie">
    <ul>
        <li><a href="#" target="_blank"><img src="img/m1.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m2.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m3.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m4.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m5.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m6.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m7.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m8.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m9.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m10.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m11.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m12.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m13.jpg"></a></li>

        <li><a href="#" target="_blank"><img src="img/m15.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m16.jpg"></a></li>
        <li><a href="#" target="_blank"><img src="img/m17.jpg"></a></li>

    </ul>
</div>

这个是css

.movie{
    width: 90%;
    height: 400px;

    margin: 0 auto;
}
.movie img{
    width: 150px;
    height: 150px;
    border: 3px groove orange;
}
.movie ul{
    margin-top: 150px;
}
.movie li{
    float: left;
    transform-origin: left top;
    transform: rotate(10deg);
    transition: all 1s ease;
}
.movie li:hover{
    position: relative;
    z-index: 100;
    transform: rotate(0deg) scale(4);
}
.movie li:nth-child(2){
    transform: rotate(15deg);
}
.movie li:nth-child(3n){
    transform: rotate(-25deg);
}
.movie li:nth-child(4n){
    transform: rotate(30deg);
}
.movie li:nth-child(5n){
    transform: rotate(-20deg);
}

问题是 有的图片没办法旋转放大，只有一小部分可以

Answer 1

大神快来啊