CSS3转换不适用于DIV元素

我想对div elemenets（卡）执行“翻转卡”效果。为了我以下使用的代码（我应用onclick事件，但我没有在这里提到它）。有人知道问题在哪里吗？我想翻转“卡”Div元素。为了达到此目的，我正在使用下面包含的“OpenCard（）”JavaScript函数。CSS3转换不适用于DIV元素

编辑1：新增的jsfiddle

http://jsfiddle.net/9CvYd/1/

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

来源

2014-06-23 user2496520

你真的应该创建一个[的jsfiddle（http://jsfiddle.net）再现您的具体问题 – Itay

http://jsfiddle.net/YffE5/ – sharshi

谢谢寻求帮助@sharshi。你忘了添加onclick事件给div。我编辑后，并添加jsfiddle – user2496520

问题是您的if声明条件不匹配。

这里点击一张牌：http://jsfiddle.net/YffE5/1/

if ($("#" + id + " img").is(":hidden")) // Image is visible, thus code inside this will not execute.

来源

2014-06-23 18:14:03 Coby

谢谢你的回答@Coby。我删除了，如果声明，但div（或卡）不翻转... – user2496520

我不可能帮助调试该代码，因为大部分变量未定义您提供的部分代码。我怀疑你没有写这个代码，因为你不明白。 – Coby

CSS3转换不适用于DIV元素

回答

相关问题