当div中的图像被点击时，如何翻转Div？ [英] How can I flip a Div when an image within that div is clicked?

问题描述

好的，所以我对写Javascript的知识很少，我可以编辑一点，并且在CSS3动画中有点小。

OK so I know very little about writing Javascript, I can edit it a little, and have dabbled a bit in CSS3 animations.

我会给你一个图像

网站布局将是这样： http://i.imgur.com/XyhaxNP.jpg

我发现了几个在Google上做的方法，但是当用户悬停在div上时，大多数人似乎翻转了div，我需要它在点击事件，因为它也需要在移动上工作。

I have found a few ways of doing it on Google but most of them seem to flip the div when the user hovers over the div, I need it to be on click event as it will also need to work on mobile.

使用切换按钮的第三个演示是我正在查看的，但是当我将事件添加到图像时，这似乎不工作。

the third demo with the toggle button is what I was looking at, but that seems to not work when I add the event to an image.

这是我到目前为止，我把onclick事件的图像（它曾经在我发现的演示中的一个按钮），但它不工作的图像。

This is what I have so far, I have moved the onclick event to the image (it used to be on a button in the demo I found) but it doesnt work on the image.

HTML：

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <img class="teamlogo" onclick="document.querySelector('#flip-toggle').classList.toggle('flip');" src="images/logo/niners.png"/>
        </div>
        <div class="back">
            Back of div content
        </div>
    </div>
</div>

CSS：

.teamlogo{
padding-left: 5%;
}

/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 320px;
height: 480px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
z-index: 2;
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}

所以在这个当前点，当你将鼠标悬停在它上面时，

So at this current point, it flips when you hover over it, and I need it just to flip when you click on the image.

这里是一个工作演示： http://jsfiddle.net/wvveY/1/

Here is a working demo: http://jsfiddle.net/wvveY/1/

推荐答案

想要保持JavaScript与HTML分离，但如果你想在标签内部，那么更好地放在代码引用的标签，即标签。这样，div中的所有点击（无论是在图片或文字上）都会触发翻页。

Generally you want to keep JavaScript separate from the HTML, but if you want it inside the tag, then better put on the tag the code is referencing, i.e. the tag. This way any clicks inside that div, be it on the image or text, will trigger the flip.

<div class="flip-container">
  <div class="flipper" onclick="this.classList.toggle('flipped')">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back
    </div>
  </div>
</div>

然后你有CSS类：

.flipped {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  transform:rotateY(180deg);
}

看到它在这里工作： http://jsfiddle.net/wvveY/4/

这篇关于当div中的图像被点击时，如何翻转Div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！