CSS로 동적인 효과

.testlist li {

    -moz-transition: all 0.1s ease-in 0s;

    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);

    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);

    display: inline-block;

    margin: 0 5px 5px 0;

    opacity: 0;

    padding: 4px;

    position: relative;

}

.testlist li:hover {

    -moz-transform: scale(1.2) translateY(0px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

}

.testlist li:nth-child(3n-2):hover {

    -moz-transform: scale(1.2) translateY(0px) rotate(-4.5deg);

}

.testlist li:nth-child(3n):hover {

    -moz-transform: scale(1.2) translateY(0px) rotate(4.5deg);

}

3n-2: 1,5,6,7,10

3n: 3,6,9,12

default: 2,4,6,8,11

n=1~7=00