HTML5 snippet : CSS3 transitions example : Polaroid scale and rotate

  
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Polaroid</title>
	<meta name="author" content="Natalie Downe">
	<meta name="modified-by" content="html5snippets.com">
	
	<style type="text/css">
	
	body {
		background-color: #E9E9E9;
		color: #333;
		font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
		font-size: 16px;
	}

	a.polaroid {
		display: block;
		margin: 10em auto 0 auto;
		text-decoration: none;
		color: #333;
		padding: 13px 13px 26px 13px;
		width: 200px;
		border: 1px solid #BFBFBF;
		background-color: white;
		z-index: 2;
		font-size: 0.8em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		transform: rotate(10deg);
		-webkit-transition: all 0.5s ease-in;
	}
	
	a.polaroid img{
		width:200px;
		-webkit-transition: all 0.5s ease-in;
	
	}
	
	a.polaroid:hover,
	a.polaroid:focus,
	a.polaroid:active {
		z-index: 999;
 		-webkit-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
		-moz-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
		box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
		-webkit-transform: rotate(0deg) scale(1.5);
		-moz-transform: rotate(0deg) scale(1.5);
		transform: rotate(0deg) scale(1.5);
	}
	
	
	a.polaroid:hover img,
	a.polaroid:focus img,
	a.polaroid:active img{
		-webkit-transform: rotate(0deg) scale(1);
		-moz-transform: rotate(0deg) scale(1);
		transform: rotate(0deg) scale(1);
	
	}
	
	.polaroid img {
		margin: 0 0 15px;
	}
	
	a img {
		border: none;
		display: block;
	}
	
	</style>
	
</head>
<body>
	
	<div class="photo-album">

		<a href="http://www.flickr.com/photos/breve/5580602932/in/photostream/" class="medium polaroid"><img src="http://farm6.static.flickr.com/5261/5580602932_69ae9a5886.jpg" alt="">Surfing in Costa Rica</a>

	</div>
	

</body>
</html>
You must login to edit.

4

CSS3 transitions example : Polaroid scale and rotate

You must login to vote.
