I have a fiddle <http://jsfiddle.net/nLhgT/>
I followed the instructions here <http://davidwalsh.name/css-flip> and <http://desandro.github.io/3dtransforms/docs/card-flip.html> When I flip the card, only the front side is being shown (flipped). I can't seem to get the backface to show. I've read similar questions on stackoverflow saying the backface must be rotated first. It is indeed rotated initially in my example.

HTML

```
<ul>
    <li>
        <div class="container">
        <div class="card">
            <div class="front">
                front
            </div>
            <div class="back">
                back
            </div>
        </div>
        </div>
    </li>
</ul>

```

CSS

```
li { 
  width: 300px;
  height: 260px;
  position: relative;
  perspective: 800px;
  list-style-type: none;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.card div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg );
  transform: rotateY(180deg);
}
.card.flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

```

JS

```
  $(document.body).on('click', '.card', function() {
          console.log("CLICK");
    document.querySelector('.card').classList.toggle("flip");
  });

```

The only difference in my example is that the card is within an unordered list. I intend to make a list of these cards. But I don't think that should affect things.