bxSlider custom transition mode - css-transitions

Question

I'm trying to get a new transition effect for bxslider, but I'm not sure if this is the correct approach.
This is what I have so far: http://jsfiddle.net/wilfff/6KAFt/
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false,
mode: 'fade',
delay: 8900/*,
onSlideBefore: function (elm) {
elm.css({
"-webkit-transition": ".9s ease-out",
"-moz-transition": ".9s ease-out",
"-ms-transition": ".9s ease-out",
"-o-transition": ".9s ease-out",
"transition": ".9s ease-out",
"-webkit-transform": "rotateX(360deg)",
"-moz-transform": "rotateX(360deg)",
"-ms-transform": "rotateX(360deg)",
"-o-transform": "rotateX(360deg)",
"transform": "rotateX(360deg)"
});
elm.hide();
}*/,
onSlideAfter: function (elm) {
elm.css({
"-webkit-transition": ".9s ease-out",
"-moz-transition": ".9s ease-out",
"-ms-transition": ".9s ease-out",
"-o-transition": ".9s ease-out",
"transition": ".9s ease-out",
"-webkit-transform": "rotateX(360deg)",
"-moz-transform": "rotateX(360deg)",
"-ms-transform": "rotateX(360deg)",
"-o-transform": "rotateX(360deg)",
"transform": "rotateX(360deg)"
});
}
});
What I'm trying to achieve is this effect: http://webstuffshare.com/demo/FlippingSlider/index.html
Any help will be appreciated!
Cheers! :)