Random Rotation

The next goal was to add a random rotation to the mix. I found however that adding jQuery to add a random value to the rotation made the CSS3 transitions clunky. To solve that, I added looked to a pure CSS solution by using children of the div the images were living in.

Sample code:

.rotate:nth-child(even) {
 -moz-transform: rotate(5deg);
 -webkit-transform: rotate(5deg);
 transform: rotate(-3deg);
}
.rotate:nth-child(3n) {
 -moz-transform: rotate(-8deg);
 -webkit-transform: rotate(-8deg);
 transform: rotate(-7deg);
}
.rotate:nth-child(4n) {
 -moz-transform: rotate(10deg);
 -webkit-transform: rotate(10deg);
 transform: rotate(3deg);
}
.rotate:nth-child(5n) {
 -moz-transform: rotate(-5deg);
 -webkit-transform: rotate(-5deg);
 transform: rotate(3deg);
}
.rotate:nth-child(6n) {
 -moz-transform: rotate(-7deg);
 -webkit-transform: rotate(-7deg);
 transform: rotate(3deg);
}
.rotate:nth-child(8n) {
 -moz-transform: rotate(-11deg);
 -webkit-transform: rotate(-11deg);
 transform: rotate(3deg);
}