Edit in JSFiddle

<div class="unit">
  <div class="unit-flip">
    <div class="unit-flip-inner">
      <div class="flip front">
        <div id="cont01"></div>
      </div>
      <!-- / .flip front -->
      <div class="flip back">
        <div id="cont02"></div>
      </div>
      <!-- / .flip back --> 
    </div>
    <!-- / .unit-flip-inner --> 
  </div>
  <!-- / .unit-filip --> 
</div>
<!-- / .unit -->

.unit {
    margin: 30px auto 0;
    width: 300px;
}

.unflip {
    position: relative;
    -webkit-perspective: 30;
}

.unit-flip-inner {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transition: 1s;
    -moz-transition: 1s;
}

.unit-flip-inner .flip {
    position: relative;
    -webkit-transform: translateZ(1px);
    -webkit-backface-visibility: hidden;
    -moz-transform: translateZ(1px);
    -moz-backface-visibility: hidden;
    transform: translateZ(1px);
    backface-visibility: hidden;
}

.unit-flip-inner .flip.front {
    position: absolute;
}

.unit-flip-inner .flip.back {
    -webkit-transform: translateZ(-1px) rotateX(-180deg);
    -moz-transform: translateZ(-1px) rotateX(-180deg);
}

/* 回転時 */

.unit-flip-inner:hover {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(180deg);
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateX(180deg);
    -webkit-transition: 1s;
    -moz-transition: 1s;
}

#cont01,
#cont02 {
    width: 300px;
    margin: 0 auto;
    display: block;
    height: 60px;
    border-radius: 40px 40px 40px 40px / 30px 30px 30px 30px;
    background: #ccc;
    cursor: pointer;
    -webkit-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
    -moz-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
    -ms-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
    -o-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
    box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
}

#cont02 {
    background: #fff;
}