A Pen by Nick Schubach.

fKvHI.markdown

fKvHI

Forked from Captain Anonymous's Pen rEzdi.

A Pen by Nick Schubach on CodePen.

License.

index.html

<section class="flipCardWidget">
  <ul>
    <li class="card">
      <div class="front"><span>1</span></div>
      <div class="back"><span>2</span></div>
    </li>
    <li class="card">
      <div class="front"><span>1</span></div>
      <div class="back"><span>2</span></div>
    </li>
    <li class="card">
      <div class="front"><span>1</span></div>
      <div class="back"><span>2</span></div>
    </li>
  </ul>
</section>

script.js

$('.card').on('click', function () {
  $('.card.selected').removeClass('selected');
  $(this).addClass('selected');
});

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body { 
  background-color: lightgray;
}
.flipCardWidget {
  margin: 20px;
}
.flipCardWidget ul {
  list-style: none;
}
.flipCardWidget .card {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 300px;
}
.flipCardWidget .card div {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transition: transform 1s;
  perspective: 3000px;
  backface-visibility: hidden;
}
.flipCardWidget .card div span {
  display: inline-block;
  color: white;
  width: 100%;
  text-align: center;
}
.flipCardWidget .card .front {
  background: url(http://placekitten.com/300/300);
  -ms-transform: rotate( 360deg ) perspective(3000px);
  transform: rotateY( 360deg ) perspective(3000px);
}
.flipCardWidget .card.selected .front {
  -ms-transform: rotate( 180deg ) perspective(3000px);
  transform: rotateY( 180deg ) perspective(3000px);
}
.flipCardWidget .card .back {
  background: gray;
  -ms-transform: rotate( 180deg ) perspective(3000px);
  transform: rotateY( 180deg ) perspective(3000px);
}
.flipCardWidget .card.selected .back {
  -ms-transform: rotate( 0deg ) perspective(3000px);
  transform: rotateY( 0deg ) perspective(3000px);
}