jQuery的Coverflow效果

Question

我的目标是使用jQuery为div产生类似于Apple Coverflow的效果。 有一个非常不错的克隆叫做CoffeeFlow，但是它与我正在寻找的克隆略有不同。

我要寻找的更像是看着满是衣服的壁橱。 所有的div几乎都旋转了90度，因此您几乎看不到它们。 当您将鼠标悬停在上方时，它们会旋转并变直，以便可以看到它们；当您将鼠标悬停时，它们会滑回原位。

我正在使用jQuery插件运输来帮助实现这一目标。 我有一个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/