cards.html

<div class="card">
	<div class="container">
		<div class="front">
			<img src="http://placehold.it/400x600" />
		</div>

		<div class="back">
			<h5>This is a card.</h5>
			<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
			<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
			<p>This card shows some content on the front and some on the back, and can be flipped by hovering on a desktop, or by swiping across on a touch device.</p>
			<p>The back of the card is intentionally long, so that we can show both an example where the card is constrained to a square and where it is as long as the content on either side requires.</p>
		</div>
	</div>
</div>

cards.scss

.card {
  position: relative;
  padding: 0;
  margin: 0;
  -webkit-perspective: 5000;
  perspective: 5000; 
}

.card .container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.6s;
  transition: 0.6s; 
}

.card .container .front, .card .container .back {
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

.card .container .front .row, .card .container .front .column, .card .container .front .columns, .card .container .back .row, .card .container .back .column, .card .container .back .columns {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

.card .container .front {
  z-index: 2; 
}

.card .container .back {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  overflow-y: scroll;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); 
}

.card .container:hover {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg); 
}

.card .container {
  border: solid 1px #eeeeee; 
}

.card .container .front, .card .container .back {
  padding: 1em; 
}

.card.square .container {
  width: 100%;
  height: 0;
  padding-bottom: 100%; 
}