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/