I first have to recognize this awesome web tool by microsoft.  It finally cleared up how to do this transition for me.  It shows a live preview of all these confusing css tranform properties.  As always, If you can get it to work in internet explorer you are pretty much guaranteed to get it to work in the other browsers.

Using this tool I was able to figure out the values I needed for the start and end of my transition.  For the start of the transition I needed:

#cover{
  backface-visibility: visible;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%; /*for ipad*/
  transform: perspective(1000px) rotateY(0deg);
}

Then I needed to animate the rotateY property to -180deg.  For this I used Transit which is just a smoother version of animate.  After including the script all I needed was this quick code.

$('#cover').transition({
  perspective: 1000px,
  rotateY: '-180deg'
}, 1200, 'ease');

You can see a quick and dirty demo of this effect here.  Or the actual site.