body {background:#333;}	
	
.photos {
	-webkit-perspective: 1000px;
	perspective:1000px;
	margin:1em;
}
/*  styling for pic one */
.pic {
	width:200px;
	height:150px;
	float:left;
	margin-right:1em;
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	transform-origin: top left;
	animation-name: hinge, bounce;
	animation-duration:1s, .4s;
	animation-timing-function:ease-in;
	animation-delay:0s, 1s;
	animation-iteration-count:1;

}

@-webkit-keyframes hinge {
	from {-webkit-transform: rotateY(-90deg);}
	to {-webkit-transform: rotateY(0deg);}
}
@-moz-keyframes hinge {
	from {-moz-transform: rotateY(-90deg);}
	to {-moz-transform: rotateY(0deg);}
}
@-o-keyframes hinge {
	from {-o-transform: rotateY(-90deg);}
	to {-o-transform: rotateY(0deg);}
}
@keyframes hinge {
	from {transform: rotateY(-90deg);}
	to {transform: rotateY(0deg);}
}

@-webkit-keyframes bounce{
	0%{transform:translateY(0px)}
	25%{transform:translateY(-2px)}
	50%{transform:translateY(2px)}
	100%{transform:translateY(0px)}
}
@-moz-keyframes bounce{
	0%{transform:translateY(0px)}
	25%{transform:translateY(-2px)}
	50%{transform:translateY(2px)}
	100%{transform:translateY(0px)}
}
@-o-keyframes bounce{
	0%{transform:translateY(0px)}
	25%{transform:translateY(-2px)}
	50%{transform:translateY(2px)}
	100%{transform:translateY(0px)}
}
@keyframes bounce{
	0%{transform:translateY(0px)}
	25%{transform:translateY(-2px)}
	50%{transform:translateY(2px)}
	100%{transform:translateY(0px)}
}