HTML

<div class="photos">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
.............
</div>

CSS

.photos img:hover {
    -webkit-transform: rotate(360deg) scale(1.5);
    -moz-transform: rotate(360deg) scale(1.5);
    -o-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
    z-index: 10;}

why is the above CSS rotate property applied only to p1.jpg ?

Because you're only hovering on p1.jpg the CSS selector will only be fired on the image you are hovering.

If you just wan't each image to rotate seperatly, add these lines to your css.

-webkit-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-o-transition: all 1.2s linear;
-ms-transition: all 1.2s linear;
transition: all 1.2s linear;

Unfortunately, what you're asking for will require some JavaScript to make happen.

more