Question

我有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

感谢

Answer 1

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

回答你的问题：

要在页面加载时翻转其中一个图像，您必须将其与其余图像分开，并使用backface作为默认状态。通过“单独”，我的意思是，使用不同的类名，ID或名称。
现在，根据你给我们的编码器提示，除了图像之外，不可能同时翻转图像，因为当触发mouseout事件时图像会翻转回默认状态。 p>
要在另一个图像悬停时翻转默认情况下文本可见的图像，请使用此jQuery脚本：

/* 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以查看其工作原理！ ?

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

1 个答案:

修改：

CSS：

jQuery的：