【CSS3】Transition & Transforms

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<ul>
    <li><img src="http://lorempixel.com/100/100/sports/1/" alt="" />
    </li>
    <li><img src="http://lorempixel.com/100/100/city/6/" alt="" />
    </li>
    <li><img src="http://lorempixel.com/100/100/fashion/5/" alt="" />
    </li>
    <li><img src="http://lorempixel.com/100/100/food/8/" alt="" />
    </li>
</ul>

CSS

ul {
    width: 220px;
    margin: 0 auto;
    padding-top: 40px;
}
li {
    float: left;
    margin: 5px;
}
li:nth-child(3n) {
    clear: left;
}
img{
-webkit-transform: all 2s ease;
    -moz-transform: all 2s ease;
    transform: all 2s ease;
}

img:hover {
    -webkit-transform: scale(1.5) ease;
    -moz-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-box-shadow: 2px 2px 2px 2px rgb(0,0,0,4);
    -moz-box-shadow: 2px 2px 2px 2px rgb(0,0,0,4);
    box-shadow: 2px 2px 2px 2px rgb(0,0,0,4);
}