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