A Pen by James Duncombe.

index.html

<div class="voucher-container">
  <div class="flipper">
    <div class="front">
      <img src="http://www.jcsquash.com/wp-content/themes/jcsquash/images/jcsquash-logo-small-2.png" />
      <div>
        <h3>Coaching Voucher</h3>
        <p>John Smith</p>
      </div>
    </div>
    <div class="back">
      <p>Why not buy a JC Squash coaching voucher for a friend or family member?</p>
      <p>Email JC for individual lesson prices and include the recipients location and desired venue.</p>
    </div>
  </div>
</div>

script.coffee

$container = document.querySelector('.voucher-container')
$container.addEventListener 'click', (e) ->
  $container.classList.toggle('flipped')

style.scss

@import "compass";
@mixin backface-visibility($backface-visibility) {
 -webkit-backface-visibility: $backface-visibility;
  -moz-backface-visibility: $backface-visibility;
  backface-visibility: $backface-visibility;
}

@mixin transform($transform) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -ms-transform: $transform;
  -o-transform: $transform;
  transform: $transform;  
}

@mixin border-radius($border-radius) {
  -webkit-border-radius: $border-radius;
  -moz-border-radius: $border-radius;
  -ms-border-radius: $border-radius;
  -o-border-radius: $border-radius;
  border-radius: $border-radius;  
}


@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;  
}

@mixin transform-style($transform-style) {
  -webkit-transform-style: $transform-style;
  -moz-transform-style: $transform-style;
  transform-style: $transform-style;  
}

@mixin perspective($perspective) {
 -webkit-perspective: $perspective;
  -moz-perspective: $perspective;
  perspective: $perspective;
}

@mixin box-shadow($box-shadow) {
 -webkit-box-shadow: $box-shadow; 
 -moz-box-shadow: $box-shadow; 
 -o-box-shadow: $box-shadow; 
 box-shadow: $box-shadow;   
}

@mixin user-select($user-select) {
  -webkit-user-select: $user-select;
  -moz-user-select: $user-select;
  user-select: $user-select;  
}


.voucher-container {
  @include user-select(none);
  color: #fff;
  font-family: 'League Gothic';
  font-weight: 400;
  font-size: 14px;
}

.voucher-container {
  display: inline-block;
  @include transform-style(preserve-3d);
  @include perspective(600px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  
  .front {
    background-size: 60%;
    letter-spacing: 1px;
    & > div {
      margin-top: 21px;
      float: right;
      width: 70%;
    }
    img {
      margin-top: 13px;
      float: left;
      width: 65px;
      margin-left: 5px;
    }
    h3 {
      line-height: 1.2;
      margin: 0;
      font-weight: 400;
      font-size: 32px;
      text-transform: uppercase;
    }
    p {
      font-size: 24px;
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
  
  .back {
    font-family: Arial;
    @include transform(rotateY(180deg));
    p {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 21px;
      margin-top: 7px;
    }
    
    p:last-child {
      color: #A8A8A8; 
      font-size: 14px;
    }
  }

  .flipper, .front, .back {
    @include perspective(600px);
    padding: 10px 15px;
    height: 150px;
    width: 300px;
  }
  
  .front, .back {
    background: #070002 url(https://dl.dropboxusercontent.com/u/4576039/jezza/silhouette.png) no-repeat 105% 10px;
    background-size: 60%;
    background-color: #070002;
    cursor: pointer;
    position: absolute;
    @include box-shadow(0 2px 10px rgba(0,0,0,0.3));
    @include border-radius(7px);
    @include transition(all 1s);
    @include backface-visibility(hidden);
  }
  
  &.flipped .back {
    @include transform(rotateY(0deg));
  }
  
  &.flipped .front {
    @include transform(rotateY(-180deg));
  }
  
}

Working-3D-flip.markdown

Working 3D flip

A Pen by James Duncombe on CodePen.

License.