Cross-Browser Flip Card

cross-browser-flip-card.markdown

Cross-Browser Flip Card

A GSAP powered cross-browser 3D flip card sample.

Basically it uses two different elements that are animated at the same time to create the flip card, without using preserve-3d which is not supported by IE.

A Pen by Rodrigo Hernando on CodePen.

License.

index.html

<div id="mainWrap">
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack"></div>
  <div class="cardFront"></div>
</div>
</div>
<div style="clear:both;"></div>

<div id="mainWrap" style="margin-top:10px;">
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
  <div class="cardBack playcardBack"></div>
  <div class="cardFront playcardFront"></div>
</div>
</div>

script.js

CSSPlugin.defaultTransformPerspective = 1000;

//we set the backface 
TweenMax.set($(".cardBack"), {rotationY:-180});

$.each($(".cardCont"), function(i,element) {
  
	var frontCard = $(this).children(".cardFront"),
      backCard = $(this).children(".cardBack"),
      tl = new TimelineMax({paused:true});
	
	tl
		.to(frontCard, 1, {rotationY:180})
		.to(backCard, 1, {rotationY:0},0)
		.to(element, .5, {z:50},0)
		.to(element, .5, {z:0},.5);
	
	element.animation = tl;
  
});

$(".cardCont").hover(elOver, elOut);

function elOver() {
    this.animation.play();
}

function elOut() {
    this.animation.reverse();
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

style.css

body
{
  background:#444;
}
.cardCont
{
  width:250px;
  height:400px;
  float:left;
  margin-right:10px;
  position:relative;
  /*border:solid 2px #fff;*/
}
.cardFront, .cardBack
{
  position:absolute;
  width:250px;
  height:400px;
  background:url('https://s.cdpn.io/33073/lorempixel.jpg');
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}
.cardBack
{
  background:url('https://s.cdpn.io/33073/lorempixe1l.jpg');
}

.playcardFront
{
  background:url("http://unlimitedpotentialnow.com/wp-content/uploads/2012/01/Bouquet-cs.jpg");
}
.playcardBack
{  background:url("http://i203.photobucket.com/albums/aa158/Comic1111/ACe.png");
}