CSS Card Flip Transition 01

by Sky Sigal

HTML

<p/>
<p/>
<div class="card-container">
  <div class="card">
    <div class="side">A</div>
    <div class="side back">B</div>
  </div>
</div>
<hr/>

<div class="card-container">
  <div class="card">
      <div class="side">
          <img style="width:100%" src="http://learn.shayhowe.com/assets/courses/advanced-html-css-guide/transitions-aminations/jimmy.jpg"/>
      </div>
    <div class="side back">
        Jimmy!
    </div>
  </div>
</div>

CSS

.card-container {
  position: relative;
  height: 140px;
  width: 140px; 
  -webkit-perspective: 500;
  perspective: 500;
}

.card {
  position: absolute;
  height: 100%;
  width: 100%;
  background:red;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
    line-height:100px;
    text-align:center;
}

.card:hover {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.card .side {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
 }
.card .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}