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/