A Pen by Daniel W. Robert.

CSS-Card-Flip.markdown

CSS Card Flip

CSS card-flip hover effect using CSS 3D Transforms. Fallback hover fade effect for browsers without full support.

A Pen by Daniel W. Robert on CodePen.

License.

index.html

<div class="card_wrap">
  <div class="card">
    <div class="face front"><img src="http://placekitten.com/g/300/300" alt="" /></div>
    <div class="face back">
      <h2>Card Title</h2>
      <p>Card description</p>
    </div>
  </div>
</div>

script.js

(function($) {
  // Run alternative animation for IE
  // and borwsers not supporting 3D Transfrorms
  var altAnimation = function(elem) {
    var ieCheck = document.body.style.msTouchAction !== undefined;
    
    if(!Modernizr.csstransforms3d || ieCheck) {
				$(elem).addClass("alt_animation");
			}

			$(".alt_animation").hover(function() {
				$(this).children("div:first-of-type").fadeToggle("fast");
			});
  };
  
  // Envoke fn on document.ready
	$(function() {
		var recipes = ".card_wrap",
			cards = ".card";

		//elliTabs.cardToggle(recipes, cards);
		elliTabs.altAnimation(cards);
	});
}(jQuery));

style.css

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
  background: #2e2f30;
}

.card_wrap {
  width: 300px;
  height: 300px;
  margin: 25px auto;
	position: relative;
	cursor: pointer;
	-webkit-perspective: 800px;
	perspective: 800px;
}

.card_wrap .card {
  width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.card_wrap:hover .card {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.card .face {
	position: absolute;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.card .front {
	z-index: 2;
}
.card .back {
	width: 100%;
	height: 100%;
	padding: 10px;
	background: #FFF;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.card_wrap:hover .card.alt_animation,
.card_wrap .card.alt_animation .back {
	transform: none;
}