Card flip using jquery and css3

I originally had created a page that uses a card layout with 3d flipping cards using this how to guide. This proved to not work in IE and have occasional hiccups in chrome as well.

After much debugging and troubleshooting I created a better card flip system using css3 and jquery, code below:

page format

div class=”cardcontainer col-md-3″ align=”center”>
div class=”card applicantcard”>
div class=”front side flippedz”>Hello/div>
div class=”back side”>World/div>
/div>
/div>

Add this to the bottom of the page in a script tag:

function flip(x){
var parent = $(x).parent().parent().parent()
parent.toggleClass('flipped');
parent.find('.back').toggleClass('flippedy');
$(x).parent().parent().toggleClass('flippedz');
};
function flipback(x){
var parent = $(x).parent().parent().parent()
parent.toggleClass('flipped');
parent.find('.front').toggleClass('flippedz');
$(x).parent().parent().toggleClass('flippedy');
};


And finally use this CSS:

//for cardflip
.cardcontainer {
height: 500px;
margin-right: 5%;
margin-bottom: 15px;
position: relative;
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
-ms-perspective: 1500px;
-o-perspective: 1500px;
perspective: 1500px;
}

.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}

.card .side {
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 1px;
border-color: $darkgray;
border-style: solid;
padding-bottom: 10px;
background: #FFF !important;
-webkit-backface-visibility: hidden;
}

.card.flipped {
transform: rotateY( 180deg );
}

.flippedz {
z-index: 4 !important;
}
.flippedy {
z-index: 3 !important;
}

.card .front {
background: #FFF !important;
z-index: 2;
}
.card .back {
background: #FFF !important;
transform: rotateY( 180deg );
z-index: 1;
}