Seeking help to implement a "Flip card" effect on div elements (cards). I have applied the code below, but encountering an issue. The goal is to flip the "Card" Div element by utilizing the JavaScript function "OpenCard()" provided below.
EDIT 1: Added jsFiddle
JavaScript:
function OpenCard() {
var id = $(this).attr("id");
if ($("#" + id + " img").is(":hidden")) {
var img = document.querySelector("#" + id + " img");
img.classList.toggle("flip");
if (ImgOpened == "") {
BoxOpened = id;
ImgOpened = $("#" + id + " img").attr("src");
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 300);
} else {
CurrentOpened = $("#" + id + " img").attr("src");
if (ImgOpened != CurrentOpened) {
setTimeout(function() {
document.querySelector("#" + id + " img").classList.toggle("flip");
document.querySelector("#" + BoxOpened + " img").classList.toggle("flip");
BoxOpened = "";
ImgOpened = "";
}, 400);
Counter-=10;
wrong.play();
} else {
$("#" + id + " img").parent().css("disabled", "disabled");
$("#" + BoxOpened + " img").parent().css("disabled", "disabled");
ImgFound++;
BoxOpened = "";
ImgOpened = "";
Counter+=100;
correct.play();
}
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 400);
}
$("#counter").html("" + Counter);
if (ImgFound == ImgSource.length) {
clearInterval(timer);
alert ("Game over! You result is: "+Counter);
}
}
}
CSS:
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
#boxcard div{
float: left;
width: 100;
height: 120;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
background: #B1B1B1;
z-index: 2;
}
#boxcard > div:nth-child(6n+1) {
clear: both;
}
#boxcard div img {
/*display: none;*/
border-radius: 10px;
z-index: 3;
}
#boxcard div img.flip{
transform: rotateY(180deg);
display:inline-block;
}
HTML:
<div id="boxcard" align="center">
<div id="card10" style="visibility: visible;"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png" class=""></div>
<div id="card11" style="visibility: visible;"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png" class=""></div>
<div id="card12" style="visibility: visible;"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>