0

我正在尝试添加翻转和缩放效果，但我只能实现一种效果。

用例是当我单击图像时图像会缩放，现在我需要在鼠标离开图像之前添加翻转效果。

任何人都可以使用我的代码帮助我输出。

这是我尝试过的：

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

    });

演示

4

2 回答 2

3

试试这个我想它会帮助你..

具有多个变换的类。

.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-14T11:00:15.843 回答
0

创建两个单独的 JavaScript 函数，然后编写 jQuery 代码来操作函数内图像的 css。jQuery css 操作代码示例：

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

您可以在大括号内设置任何 css 属性。

然后，您可以在元素 DOM 事件上调用 JavaScript 函数。因此缩放函数将在 onClick 事件中调用，而翻转函数将在 onMouseOut 事件中调用。

于 2013-11-14T10:27:47.363 回答