单击 div 中的图像时如何翻转该 Div？

好吧，我对编写 Javascript 知之甚少，我可以对其进行一些编辑，并且涉足了 CSS3 动画。

我将向您展示我正在努力实现的目标，然后在下面进行解释。

网站布局将是这样的：https://i.stack.imgur.com/RMb4R.jpg https://i.stack.imgur.com/RMb4R.jpg

我在 Google 上找到了几种执行此操作的方法，但大多数方法似乎在用户将鼠标悬停在 div 上时翻转 div，我需要它在单击事件上，因为它也需要在移动设备上工作。

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

这是我到目前为止所拥有的，我已将 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);
}

因此，目前，当您将鼠标悬停在其上时，它会翻转，而我需要它在您单击图像时翻转。

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

一般来说，您希望将 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>

然后你就有了 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/ http://jsfiddle.net/wvveY/4/