CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

Question

After looking through IE10\'s developer blog I have found that they do not support the preserve-3d setting.

They do offer a workaround, but I can not seem to get it

Answer 1

Found the answer here. Posted my own updated fiddle here - this is the css (I included ms prefixes only for brevity):

.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-ms-perspective: 1000;
perspective: 1000;
}

.card {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
transition: all 0.5s linear;
backface-visibility: hidden;
}

.card.flipped {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.front {
    background: red;
}
.back {
    background: #00f;
    transform: rotateY( 180deg );
}

.container:hover .card {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

Here is a button handler for flipping (in addition to the hover event):

$('button').click(function() {
    $('.card').toggleClass('flipped');
});

Interesting (and somewhat troubling) that the answer for IE10 is flipping by 360 degrees (the 'flipped' class and hover event in the css). Still wrapping my head around that one.

Here's hoping they implement preserve-3d soon.