nth-child using rotation in css not working

Question

I'm trying to make some images look like Polaroids. I want the rotation to look randomized by using :nth-child property, but so far, it hasn't been working at all. Any ideas?

Here is the HTML:

<div class="polaroid">
    <a href="#building" title="Building"><img src="building.jpg"></a>
    <a href="#car" title="Car"><img src="car.jpg"></a>
    <a href="#building" title="Building"><img src="okay.jpg"></a>
    <a href="#sky" title="Sunset over a City"><img src="sky.jpg"></a>
    <a href="#street" title="Street in Tokyo"><img src="street.jpg"></a>
    <a href="#sunset" title="Sunset on the Beach"><img src="sunset.jpg">
    <a href="#tiger" title="Tiger"><img src="tiger.jpg"></a>
    <a href="#tree" title="Palm Trees"><img src="trees.jpg"></a>
    <a href="#turtle" title="Turtle"><img src="turtle.jpg"></a>
    <a href="#water" title="Waterfall"><img src="water.jpg"></a>
</div>

Here is the CSS I've been trying to use to rotate every 3rd image. I'm using Chrome by the way.

.polaroid:nth-child(3n) a {
    -webkit-transform: rotate(-8deg); 
}

Answer 1

:nth-child won't apply to the class, just the element, plus you were applying to the parent, when you need to apply to children a then set img to rotate

 a:nth-child(3n) img { -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); transform: rotate(-8deg); border: red solid } img { border: yellow solid } 

 <div class="polaroid"> <a href="#building" title="Building"> <img src="//lorempixel.com/100/100"> </a> <a href="#car" title="Car"> <img src="//lorempixel.com/100/100"> </a> <a href="#building" title="Building"> <img src="//lorempixel.com/100/100"> </a> <a href="#sky" title="Sunset over a City"> <img src="//lorempixel.com/100/100"> </a> <a href="#street" title="Street in Tokyo"> <img src="//lorempixel.com/100/100"> </a> <a href="#sunset" title="Sunset on the Beach"> <img src="//lorempixel.com/100/100"> <a href="#tiger" title="Tiger"> <img src="//lorempixel.com/100/100"> </a> <a href="#tree" title="Palm Trees"> <img src="//lorempixel.com/100/100"> </a> <a href="#turtle" title="Turtle"> <img src="//lorempixel.com/100/100"> </a> <a href="#water" title="Waterfall"> <img src="//lorempixel.com/100/100"> </a> </div>