3d card flip effect with css not showing back

Question

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.

Answer 1

So the main problem is that preserve-3d isn't supported by IE. Huge bummer, but not much that can be done about it. Therefore, you should be applying the transform to each child element, not the entire card.

The best way I've found of making a card flip is as follows:

• Transform each face. The front should default to 0, the back to 180. When flipped, they should be 180 and 360 respectively.
• Apply a z-index to them. The visible face should have something like 10, while the hidden one has 0. This ensures that the right one is in front at all times (even in browsers that don't support transformations)

Here is my update to your Fiddle showing a working card flip.

Answer 2

Here you go...

Demo Fiddle

HTML:

<ul>
    <li>
        <div class="container" id="flip-toggle">
            <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;
}
.container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    border: 1px solid #ccc;
}
#flip-toggle.flip .card {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter:"FlipH";
}
.container, .front, .back {
     width: 300px;
    height: 260px;
}
.card {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%;
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    background: red;
    z-index: 2;
}
.back {
    background: blue;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

JS:

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