Transform And Transitions

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}

transform_transition.css

/**
 * Transform And Transitions
 */

body {
	background: #fff;
	font:200 normal 14px/1.5 'Helvetica Neue', Arial, sans-serif;
}
h2 {
	font-size: 20px;
	line-height:1.3;
}
h3 {
	font-size: 16px;
}
div {
	padding: 30px 50px;
}
.image {
	display:inline-block;
	border:10px solid #fff;
	border-radius: 3px;
}
.image img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 10px solid #fff;
	border-radius: 3px;
	box-sizing: border-box;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#clouds {
	z-index: 100;
	position: relative;
	box-sizing: border-box;
}
#clouds::before, #clouds::after {
	content: "";
	border-radius: 3px;
	width: 100%;
	height: 100%;
	position: absolute;
	border: 12px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	transition: 0.5s all ease-out;
}
#clouds::before {
	top: 4px;
	left: 4px;
	z-index: -1;
	transform: rotate(2deg);
	transform-origin: top left;
}
#clouds::after {
	top: 8px;
	left: 8px;
	z-index: -2;
	transform: rotate(4deg);
	transform-origin: top left;
}
#clouds:hover::before, #clouds:hover::after {
	transform-origin: top right;
	transform: rotate(-4deg);
}
#clouds:hover::before {
	transform: rotate(-2deg);
}
/**/

transform_transition.html

<div>
	<a id="cat" class="image" href="http://www.flickr.com/photos/reddahliaphotos/4211136119/" title="'so, don't talk to me like that. i'm also a cat.' by red.dahlia, on Flickr"><img src="http://farm5.staticflickr.com/4041/4211136119_1e89e2fa6c_n.jpg" width="260" height="320" alt="'so, don't talk to me like that. i'm also a cat.'"></a>
</div>
<div>
	<a id="clouds" class="image" href="http://www.flickr.com/photos/niamor/3600299837/" title="Landscape from Ollon by Niamor83, on Flickr"><img src="http://farm4.staticflickr.com/3311/3600299837_24cf4b74ee_n.jpg" width="320" height="214" alt="Landscape from Ollon"></a>
</div>