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元素

回答

相關問題