Backface visibility of an envelope

For StackOverflow: http://stackoverflow.com/q/43145787/962603.

HTML

<input type="button" value="Toggle Envelope" id="toggle" />
<div id="container">
  <img style="width: 100%;" src="https://i.stack.imgur.com/s3Mwf.png">
  <div id="flap">
    <img src="https://i.stack.imgur.com/W9LGl.png" class="back">
    <img src="https://i.stack.imgur.com/JO2BZ.png" class="front">
  </div>
</div>

CSS

@keyframes swing-top-fwd {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(180deg);
  }
}

@keyframes swing-top-fwd-reverse {
  0% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

.swing-top-fwd {
  animation-name: swing-top-fwd;
}

.swing-top-fwd.reverse {
  animation-name: swing-top-fwd-reverse;
}

#container {
  position: relative;
  width: 405px;
  margin-top: 150px;
  perspective: 1000px;
}

#flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation-duration: 1s;
  animation-fill-mode: both;
  transform-origin: top;
  transform-style: preserve-3d;
}

#flap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
}

#flap img.back {
  transform: rotateY(180deg);
}

JavaScript

var flap = document.getElementById('flap');
document.getElementById('toggle').addEventListener('click', function() {
  if (!flap.classList.contains('swing-top-fwd')) {
    flap.classList.add('swing-top-fwd');
  } else {
    flap.classList.toggle('reverse');
  }
});