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.

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

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.

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.

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

回答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.

<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:

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