jQuery的Coverflow式效果

Question

我的目标是使用jQuery为div制作类似于apple coverflow的效果。有一个非常棒的克隆名为CoffeFlow，但它与我想要的略有不同。

我要找的更像是看一个装满衣服的壁橱。所有的潜水器都旋转了近90度，所以你几乎看不到它们。当你把鼠标放在上面时，它们会旋转并拉直，这样你就可以看到它们，当你解开鼠标时，它们又滑回原位。

我正在使用jQuery插件transit来帮助实现这一点。我有一个jsFiddle，它几乎达到了我想要的，但有些东西似乎不对劲。它看起来是向内和向外伸展，而不是旋转。可能还有其他问题，但这是我现在最明显的。

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);
        });
    });

编辑：看起来我最大的问题之一是css中的透视图不起作用。如果我将透视应用于我的转换函数（如您在演示中所见），但不在我的css文件中，它就会起作用。

jsFiddle与解决方案

Answer 1

我对css转换不是很熟悉，但在jquery transit执行mouseout后，我使用开发工具检查了css，并用它替换了您的转换和透视css，看起来它很有效：

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

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