bxSlider custom transition mode

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! :)