javascript - div 内の画像がクリックされたときに div を反転するにはどうすればよいですか?

Question

私はJavascriptを書くことについてほとんど知りません.少し編集することができます.CSS3アニメーションにも少し手を出しました.

私が達成しようとしていることのイメージを示してから、以下で説明します。

ウェブサイトのレイアウトは次のようになります: http://i.imgur.com/XyhaxNP.jpg

私はGoogleでそれを行ういくつかの方法を見つけましたが、それらのほとんどは、ユーザーがdivにカーソルを合わせるとdivを反転するように見えます.モバイルでも動作する必要があるため、クリックイベントにする必要があります.

トグル ボタンを使用した 3 番目のデモは、私が見ていましたが、イベントを画像に追加すると機能しないようです。

これは私がこれまでに持っているものです.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/

Answer 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/

Answer 2

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

.flip-container:active代わりに作る.flip-container:hover