这是源代码 <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);
}问题是 有的图片没办法旋转放大，只有一小部分可以
qq_龙戈_0