Coverflow like effect with jQuery

Question

My goal is to make an effect similar to apple coverflow for divs using jQuery. There's a really great clone called CoffeeFlow but it's slightly different than what I'm looking for.

What I'm looking for is more like looking at a closet full of clothes. All of the divs are turned almost 90deg so you can barely see them. As you mouse over they rotate and straighten out so you can see them, and as you unhover, they glide back into place.

I'm using the jQuery plugin transit to help achieve this. I have a jsFiddle that almost achieves what I want, but something seems off. It appears to stretch in and out rather than rotate. There may be other things wrong as well but this is what is most apparent to me right now.

The jsFiddle

    $(document).ready(function () {
        $('.boxxe').hover(

        function () {
            $(this).stop();
            $(this).transition({
                rotateY: '0deg',
                zIndex: '2',
                background: '#afa',
                scale: 1.1
            }, 400);
        },

        function () {
            $(this).stop();
            $(this).transition({
                rotateY: '60deg',
                zIndex: '-1',
                background: '#FFF',
                scale: 1
            }, 400);
        });
    });

EDIT : It looks like one of my biggest problems is my perspective in my css doesn't work. It works if I apply perspective to my transition function (as you can see by the demo), but not in my css file.

jsFiddle with solution

Answer 1

I'm not very familiar with css transform but using the dev tools I inspected the css after jquery transit executed mouseout and replaced your transform and perspective css with that and it looks like it works:

transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);
-webkit-transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);

http://jsfiddle.net/bbird/Whqv7/