Flip demonstrates a flip animation using CSS. Tested in Google Chrome 26, IE 10, and Firefox Nightly.

Flip.css

/* entire container, keeps perspective */
body .flip-container {
	width: 100%;
}

body .flip-container .flipper {
	position: relative;
}

/* hide back of pane during swap */
body .flip-container .flipper .front,
body .flip-container .flipper .back {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: perspective(1000px) rotateY(180deg);
	   -moz-transform: perspective(1000px) rotateY(180deg);
	     -o-transform: perspective(1000px) rotateY(180deg);
			transform: perspective(1000px) rotateY(180deg);
	-webkit-transition: 0.6s;
	   -moz-transition: 0.6s;
		 -o-transition: 0.6s;
			transition: 0.6s;
}

/* front pane, placed above back */
body .flip-container .flipper .front {
	z-index: 2;
	-webkit-transform: perspective(1000px) rotateY(0);
	   -moz-transform: perspective(1000px) rotateY(0);
	     -o-transform: perspective(1000px) rotateY(0);
			transform: perspective(1000px) rotateY(0);
}

/* front pane, placed above back */
body .flip-container:hover .flipper .front {
	-webkit-transform: perspective(1000px) rotateY(-179.9deg);
	   -moz-transform: perspective(1000px) rotateY(-179.9deg);
	     -o-transform: perspective(1000px) rotateY(-179.9deg);
			transform: perspective(1000px) rotateY(-179.9deg);
}

/* back, initially hidden pane */
body .flip-container:hover .flipper .back {
	-webkit-transform: perspective(1000px) rotateY(0);
	   -moz-transform: perspective(1000px) rotateY(0);
	     -o-transform: perspective(1000px) rotateY(0);
			transform: perspective(1000px) rotateY(0);
}

Flip.scss

body {
    /* entire container, keeps perspective */
	.flip-container {
		width: 100%;

		.flipper {
			position: relative;

			/* hide back of pane during swap */
			.front, .back {
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				-webkit-backface-visibility: hidden;
				   -moz-backface-visibility: hidden;
				        backface-visibility: hidden;
				-webkit-transform: perspective(1000px) rotateY(180deg);
				   -moz-transform: perspective(1000px) rotateY(180deg);
				     -o-transform: perspective(1000px) rotateY(180deg);
						transform: perspective(1000px) rotateY(180deg);
				-webkit-transition: 0.6s;
				   -moz-transition: 0.6s;
					 -o-transition: 0.6s;
						transition: 0.6s;
			}

			/* front pane, placed above back */
			.front {
				z-index: 2;
				-webkit-transform: perspective(1000px) rotateY(0);
				   -moz-transform: perspective(1000px) rotateY(0);
				     -o-transform: perspective(1000px) rotateY(0);
						transform: perspective(1000px) rotateY(0);
			}
		}

		/* flip the pane when hovered */
		&:hover .flipper {
			/* front pane, placed above back */
			.front {
				-webkit-transform: perspective(1000px) rotateY(-179.9deg);
				   -moz-transform: perspective(1000px) rotateY(-179.9deg);
				     -o-transform: perspective(1000px) rotateY(-179.9deg);
						transform: perspective(1000px) rotateY(-179.9deg);
			}

			/* back, initially hidden pane */
			.back {
				-webkit-transform: perspective(1000px) rotateY(0);
				   -moz-transform: perspective(1000px) rotateY(0);
				     -o-transform: perspective(1000px) rotateY(0);
						transform: perspective(1000px) rotateY(0);
			}
		}
	}
}