ul{
    display: block;
    width: 600px;
    height: 600px;
    border: 10px solid #f40;
    background: maroon;
    margin: 10px auto;
    padding: 0;
}
ul li{
    display: inline-block;
    width: 200px;
    height: 200px;
    float: left;
    overflow: hidden;
    list-style: none;
    background: #ff4400;
}
ul li img{
    width: 100%;
    height: 100%;
}
/*1个*/
li:only-child{
    width: 100%;
    height: 100%;
}
/*2个*/
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) + li{
    width: 50%;
    height: 50%;
}
li:first-child:nth-last-child(2) + li {
    margin-left: 50%;
}
/*3个*/
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 50%;
    height: 50%;
}
li:first-child:nth-last-child(3) {
    margin-left: 25%;
}
li:first-child:nth-last-child(3) ~ li {
    float: left;
}
/*4个*/
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 50%;
    height: 50%;
    float: left;
}
/*5/6个*/
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(6){
    width:66.666666%;
    height:66.666666%;
}
li:first-child:nth-last-child(5) ~ li,
li:first-child:nth-last-child(6) ~ li {
    width:33.3333333333%;
    height:33.333333333333%;
}
/* 7个 8个 9个 */
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(7) ~ li,
li:first-child:nth-last-child(8) ~ li,
li:first-child:nth-last-child(9) ~ li {
    width: 33.333333333333%;
    height: 33.333333333333%;
}
li:first-child:nth-last-child(7) {
    margin-left:33.3333333%;
    margin-right: 33.333333%;
}
li:first-child:nth-last-child(8) {
    margin-left: 16.666666%;
}
.list {
    border: none;
    border-radius: 87% 91% 98% 100%;
    -webkit-transition: all .35s;
    transition: all .35s;
    overflow: hidden;
}
.list:hover {
    border-radius: 95% 70% 100% 80%;
    transform: rotate(-2deg);
}
.list:nth-child(2n+1) {
    border-radius: 59% 52% 56% 59%;
    transform: rotate(-6deg);
}
.list:nth-child(2n+1):hover {
    border-radius: 51% 67% 56% 64%;
    transform: rotate(-4deg);
}
.list:nth-child(3n+2) {
    border-radius: 84% 94% 83% 72%;
    transform: rotate(5deg);
}
.list:nth-child(3n+2):hover {
    border-radius: 69% 64% 53% 70%;
    transform: rotate(0deg);
}
.list:nth-child(5n+3) {
    border-radius: 73% 100% 82% 100%;
    transform: rotate(7deg);
}
.list:nth-child(5n+3):hover {
    border-radius: 73%;
    transform: rotate(7deg);
}
.list:nth-child(7n+5) {
    border-radius: 93% 90% 85% 78%;
    transform: rotate(-2deg);
}
.list:nth-child(7n+5):hover {
    border-radius: 53% 70% 85% 68%;
    transform: rotate(-2deg);
}
.list:nth-child(11n+7) {
    border-radius: 68% 68% 83% 53%;
    transform: rotate(-2deg);
}
.list:nth-child(11n+7):hover {
    border-radius: 58% 98% 78% 83%;
    transform: rotate(3deg);
}