Coverflow與jQuery一樣效果

Question

我的目標是使用jQuery爲div創建一個類似於apple coverflow的效果。有一個非常棒的克隆CoffeeFlow，但它與我所尋找的略有不同。

我在找什麼更像是看着衣櫃裏的衣服。所有的div都變成了90deg，所以你幾乎看不到它們。當你滑過它們時，它們會旋轉並伸直，這樣你就可以看到它們，當你不在的時候，它們會滑回原位。

我使用the jQuery plugin transit來幫助實現此目的。我有一個幾乎可以實現我想要的jsFiddle，但有些東西似乎關閉了。它看起來伸展而不是旋轉。也可能有其他的錯誤，但這是我現在最明顯的。

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

編輯：它看起來像我的一個最大的問題是我在我的CSS角度不起作用。如果我將透視應用於我的轉換函數（正如您可以在演示中看到的那樣），但是不在我的css文件中，它會起作用。

的jsfiddle與solution

Answer 1

我不是很熟悉CSS變換，但使用的開發工具我檢查jQuery的過境執行鼠標移出後的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/