How can I flip a Div when an image within that div is clicked?

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

好吧,所以我对编写Javascript知之甚少,我可以稍微编辑一下,并且在CSS3动画中略微涉足。

I will give you an image of the sort of thing I am trying to achieve and then explain it below.

我会给你一个我想要实现的东西的形象,然后在下面解释。

the website layout will be this: http://i.imgur.com/XyhaxNP.jpg

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

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.

我已经在Google上找到了一些方法,但是当用户将鼠标悬停在div上时,大多数方法似乎都会翻转div,我需要将它放在点击事件上,因为它还需要在移动设备上运行。

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.

带有切换按钮的第三个演示就是我所看到的,但是当我将事件添加到图像时,这似乎不起作用。

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.

这是我到目前为止,我已经将onclick事件移动到图像(它曾经在我发现的演示中的按钮上)但它不能在图像上工作。

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.

所以在这个当前点,当你将鼠标悬停在它上面时它会翻转,我只需要点击图像就可以翻转它。

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

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

2 个解决方案

#1

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.

通常,您希望将JavaScript与HTML分开,但如果您希望将其放在标记内,那么最好放置代码引用的标记,即标记。这样,该div内的任何点击,无论是图像还是文本,都会触发翻转。

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

and then you have the CSS class:

然后你有CSS类:

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

see it working here: http://jsfiddle.net/wvveY/4/

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

#2

http://jsfiddle.net/wvveY/3/

Make it .flip-container:active instead of .flip-container:hover

make .flip-container:active而不是.flip-container:hover

#1

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