如何在一组图像中创建单个图像翻转效果?

时间:2016-06-05 00:51:49

标签: javascript html css image css3

我有4个部分 - 每个部分都有一个图像和一些文字。

<div class=container>
 <div class=row>
  <div class="1"> img 1 </div>
  <div class="1"> img 2 </div>
 </div>
 <div class=row>
  <div class="1"> img 3 </div>
  <div class="1"> img 4 </div>
</div>

我试图让图像翻转效果 - 那里有很多东西。

当我悬停或触摸(移动)时 - 我希望图像翻转并显示一些文字。

我要做的是允许系统只允许一个图像保持翻转一些文本。

我想开始(当加载页面时)只有图像1被翻转文本 - 而另外4个是图像。当某人徘徊/触摸其他图像时,img 1重置 - 另一个显示文本。

任何可以帮助我的模块?我已经使用jquery最新和纯/骨架像响应图像。

EDIT1:

通过翻转效果 - 我的意思是

http://codepen.io/ilanf/pen/gjoKl

感谢

1 个答案:

答案 0 :(得分:2)

首先“干得好!”。我喜欢你的效果。

回答你的问题:

  1. 要在页面加载时翻转其中一个图像,您必须将其与其余图像分开,并使用backface作为默认状态。通过“单独”,我的意思是,使用不同的类名,ID或名称。

  2. 现在,根据你给我们的编码器提示,除了图像之外,不可能同时翻转图像,因为当触发mouseout事件时图像会翻转回默认状态。 p>

  3. 要在另一个图像悬停时翻转默认情况下文本可见的图像,请使用此jQuery脚本:

  4. /* Let's suppose you give the image you want originally flipped an
    extra class = "default-flipped" */
    
    $(".1").on("mouseover", function() {
        if ($(this).siblings().hasClass("default-flipped")) {
            $("default-flipped").css("transform", rotateY(180deg);
        }
    });
    

    修改

    正如我所承诺的,这是你所要求的工作版本;或者基本上我理解你的要求。

    既然你已经找到了喜欢和想要复制的工作小提琴,我想尝试重新发明轮子将是完全没有意义的。

    →虽然有一些事情需要添加到CSS中,当然还有一些jQuery:


    CSS:

    /* We create a pre-flipped class for the element you want already flipped 
    when the page loads. */
    .pre-flipped {
        transform: rotateY(180deg);
        /* That's what the card are supposed to do on hover
        Our already flipped card must already have this rule
        in order to be flipped from the start. */
    }
    
    /* If you want the images to be inline change the display
    from block to inline-block as shown: */
    .flip-images .card-wrapper {
        display: inline-block;
    }
    

    在您的小提琴的CSS中,有一段代码如下所示,用于在悬停时翻转卡片:

    .flip-images .card-wrapper:hover .card {
        transform: rotateY(180deg);
    } /* I removed it and as it makes things complicated
      when trying to create the hover effect from jQuery. */
    

    从CSS的角度来看就是这样。


    jQuery的:

    $(document).ready(function() {
        // mouseover event
        $(".card-wrapper").on("mouseover", function() {
            // Always leaves one open
            $(this).children().css("transform", "rotateY(180deg)");
            $(this).siblings().children().css("transform", "rotateY(0deg)");
        });
    });
    

    检查此codepen以查看其工作原理! ?