如何使用css/jquery添加縮放和翻轉圖像

我想添加翻轉和縮放效果，但我只能實現一種效果。如何使用css/jquery添加縮放和翻轉圖像

用例是當我點擊圖片時圖片會縮放，現在我需要在鼠標點擊圖片前添加翻頁效果。

任何人都可以請幫我用輸出使用我的代碼。

這是我曾嘗試：

HTML

<div class="flip"> 
<div class = 'card'> 
     <img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" /> 
</div> 
    </div>

CSS

.zoom_img { 
    height: 250px; 
    width: 250px; 
    /* -moz-transition: -moz-transform 0.1s ease-in; 
    -webkit-transition: -webkit-transform 0.1s ease-in; 
    -o-transition: -o-transform 0.1s ease-in; */ 
    -webkit-transition: -webkit-transform 0.5s ease-in; 
    -o-transition: -webkit-transform 0.5s ease-in; 
} 
.zoom_img_press { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    -o-transform: scale(1.1); 
} 
.flip { 
    -webkit-perspective: 800; 
    width: 400px; 
    height: 200px; 
    position: relative; 
    margin: 50px auto; 
} 
.flip .card .flipped { 
    -webkit-transform: rotatex(-180deg); 
} 
.flip .card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 0.5s; 
}

的Javascript

$(document).ready(function() { 

     $('.flip').click(function(){ 
      $(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){ 
       $(this).removeClass('zoom_img_press'); 
      }); 
     }); 
$(this).find('.zoom_img').addClass('flipped').mouseleave(function(){ 
       $(this).removeClass('flipped'); 
      }); 
     }); 

    });

Demo

來源

2013-11-14 user1853128

您不使用類的翻轉過渡。 – jfriend00

雅知道...除了點擊之外，我甚至不確定是否需要jQuery。但要了解翻轉等...看看這個網頁 - http://css3.bradshawenterprises.com/flip/ –

創建兩個單獨的JavaScript功能然後寫jQuery代碼來操作的功能內的圖像的CSS。 jQuery的css操作代碼示例：

$(".className").css({"background-color":"black","font-size":"12px"});

您可以在大括號內設置任何css屬性。

然後您可以調用元素DOM事件的JavaScript函數。因此，縮放函數將使用onClick事件調用，並且會在onMouseOut事件上調用翻轉函數。

來源

2013-11-14 10:27:47 J2D8T

試試這個，我認爲這會對你有幫助。

有多重變換的類。

.zoom-flipper{ 
    -moz-transform: scale(2.2) rotatex(-180deg); 
    -webkit-transform: scale(2.2) rotatex(-180deg); 
    -o-transform: scale(2.2) rotatex(-180deg); 
    transform: scale(2.2) rotatex(-180deg);  
}

相應的腳本：

$('.flip').click(function(){ 
    $(this).find('.zoom_img').addClass('zoom-flipper').mouseleave(function(){ 
     $(this).removeClass('zoom-flipper'); 
    }); 
});

這裏是Demo

來源

2013-11-14 11:00:15 super

如何使用css/jquery添加縮放和翻轉圖像

回答

相關問題