只有2幅圖像的紡紗效果

Question

我們只有2個瓶子的圖像（正面和背面），但想要創建某種紡紗效果。我試圖想出一些使用jQuery或CSS的方式 - 可能會模糊。想不到一個好方法。

他們想按一個按鈕看瓶子的另一面（旋轉到那裏）。

有關我如何做到這一點的任何想法？

Answer 1

看一看的CSS Coke can例子。這可能會幫助您獲得一些快速結果，或者至少可以作爲新創意的基礎。 （英文here，它也顯示了更容易發生的事情）。 你需要的唯一JS就是做實際的「滾動」。

Answer 2

你可以，例如，做到這一點與jQuery的中轉庫http://ricostacruz.com/jquery.transit/

$('button').on('click', function(){ 
    $('.bottle').transition({ 
    perspective: '100px', 
    rotateY: '180deg' 
    }); 
}); 

Answer 3

將第一張圖像（正面）左側的寬度從width: 300px; margin-left: 0px設置爲width: 0px; margin-left: 150px的動畫效果。動畫完成後，將第二張圖像從width: 0px; margin-left: 150px動畫到width: 300px; margin-left: 0px。

您可以使用.animate()用於此目的：

我希望這回答了你的問題。

Answer 4

http://css3.bradshawenterprises.com/cfimg/

退房演示2使用按鈕的交叉淡入淡出。爲了讓它旋轉，加上這樣的東西：

transform:rotatey(180deg); 
}