Cool photograph effect, pure CSS3

This is something created by me a few days ago while playing with the new CSS3 features like the transform & box-shadow. Nothing fancy, just trying to give depth to the image.

I’m assuming you are viewing this page with a brand new Firefox or Safari (webkit) browser. Otherwise, you won’t be able to see the effect (OK here is a screenshot).

For those who want to use this effect, I’d recommend you to play with this code a little bit. Because it’s a little bit of mess. You’ll need to change the width to your image’s, maybe a few more tweaks.

<style type="text/css">
#shadow1 {
	margin: 40px auto;
	width: 500px;
}
#shadow1 div, #shadow1 div div {
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	width: 480px;
	height: 303px;
	background: #fff;
}
#shadow1 div {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
}
#shadow1 div div {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}
#shadow1 div div img {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
	margin: -30px 0 0 -10px;
	border: 4px solid #fff;
}
</style>

<div id="shadow1">
	<div>
		<div>
			<img src="Your Image Here" alt="Coolio" />
		</div>
	</div>
</div>

The code basically applies box-shadows to the two divs which are already rotated a few degrees to the opposite directions. Finally the main image is being rotated back to zero degrees.

If someone would like to improve the code & make it a little bit modular, I’d love to give him/her credit here.