div to flip when scrolling left/right horizontally

Question

I am trying to replicate the effect which can be seen on this website http://www.toolofna.com/#!/work. When scrolling left/right horizontally, the div's inside which there are different images flip about the x-axis and then settle down to their original position. I know that this can be achieved using CSS3 but I presume that there's some jQuery code also running behind this effect.

I tried searching regarding this on the internet and came across webkit-transform-origin but I guess that this effect is something more complicated. Looking forward to a solution.

Answer 1

Obviously this FIDDLE won't take into account the initial state of the cards (you can do that on your own if you like), it has managed to achieve the onScroll effect you were looking for.

var visibleXStart = $('#wrapper').offset().left;
var visibleXEnd = $('#wrapper').offset().left + $('#wrapper').width();

$('#wrapper').scroll(function () {
    $('.card').each(function () {
        var thisCard = $(this);
        if (thisCard.offset().left < visibleXEnd - 100) thisCard.css({
            '-webkit-transform': 'rotatey(0deg)'
        });
        else thisCard.css({
            '-webkit-transform': 'rotatey(-180deg)'
        });
    });
});

I have extended the fiddle provided by @aamir-afridi
You might also want to do some cleanup of the code to suit your webpage.

Hope it helps.