jQuery的翻頁效果

Question

我這裏有一個的jsfiddle - http://jsfiddle.net/r3thre5q/6/

我有下面的文字隱藏的圖像。

我想將鼠標懸停在圖像上時顯示文本。

我可以將圖像淡出並滑出圖像。

我也想這樣做是圖像翻轉顯示文本。

我在這裏使用本教程http://davidwalsh.name/css-flip使用css，但我似乎無法讓它與jQuery一起工作。

如何在jQuery中使用此翻轉效果。

$(function() { 

     $(".fade").hover(function() { 
      $('.info-front').fadeTo('fast', 0.2); 
     }, function() { 
      $('.info-front').fadeTo('fast', 1); 
     }); 

     $(".slide").hover(function() { 
      $('.info-front').animate({bottom:'-300px'}); 
     }, function() { 
      $('.info-front').animate({bottom:'0'}); 
     }); 

     $(".flip").hover(function() { 
      $('.info-block').css('transform', 'rotateY(180deg)'); 
     }, function() { 
      $('.info-block').css('transform', 'rotateY(180deg)'); 
     }); 

    }) 

Answer 1

我編輯了一些你的代碼。您將需要爲文本播放更多點。快來看我們在這裏的：http://jsfiddle.net/r3thre5q/8/

我已經改變了$ .hover加入0deg

$(".flip").hover(function() { 
    $('.info-block').css('transform', 'rotateY(180deg)'); 
}, function() { 
    $('.info-block').css('transform', 'rotateY(0deg)'); 
}); 

我已經改變了CSS太：

.flip { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
}