CSS Images

The first step of the process was to get CSS3 transitions using scale and rotate transforms. Adding those to the code was simple, but then adding the random rotate was the difficult part. I initially added a jQuery random number function to append different rotations to each image. What happened however was that the CSS3 transitions became clunky with fragments of the box shadow showing from rollover to rollover. To solve it at this stage, I applied a rotation to each image.

Sample Code:

.image {
	float: left;
	height: 200px;
	width: 200px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, .7);
	-moz-box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, .7);
	box-shadow: 0px 0px 10px 5px rgba(50, 50, 50, .7);
	background-color:#fff;
	border:10px solid #fff;
	margin-right:5px;
	margin-bottom:5px;
	position:relative;
	z-index:auto;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.image img {
	width:200px;
	height:200px;
}
.big, .big img {
	width:425px;
	height:425px;
}
.test {
	width:200px;
	height:200px;
}
.half {
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
}
.rotate {
	-moz-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}
.image:hover{
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	z-index:20;
}