在Github上打牌但在Codepen或jsfiddle上打牌

-1

在我的Web Foundations課程中，我們通過製作顯示紙牌前面的紙牌，然後在點擊它時使用CSS瞭解了3D變換，會翻轉並顯示背面，然後再次點擊時翻到前面。工作很好。這是我Github上鍊接吧： https://dtarvin.github.io/3d/index.html （請讓我知道，如果它不爲你工作。）在Github上打牌但在Codepen或jsfiddle上打牌

昨天我工作的周圍具有圖像旋轉和顯示其他的圖像。我從代碼開始並在Codepen中修改它，但是我沒有觸及Github代碼，只是複製並粘貼它。在我修改任何東西之前，紙牌翻轉工作在Codepen。一旦我修改了它，我的圖像微調工作正常，但我想用它做更多。我在這裏尋求幫助，並在修改了一些代碼後，微調不能正常工作。所以我試着回到我在微調不工作的時候的代碼，但是我不能再讓它工作。

今天早上我決定重新開始，所以我將我的Github代碼複製到一個新的Codepen文件中。完全相同的代碼（我一行一行地進行驗證）。但它在Codepen中的工作方式與在Github中的工作方式不同，應該可行。當你點擊卡片時，它會翻轉，但不是顯示卡片的背面，而是顯示正面的反向圖像。這裏是Codepen鏈接： Codepen

<div id="container"> 
    <div id="card"> 
    <div class="front">1</div> 
    <div class="back">2</div> 
    </div> 
</div> 

#container{ 
    width: 55vmin; 
    height: 80vmin; 
    position: relative; 
    perspective: 3000px; 
    top: 20vh; 
    left: 20vw; 
} 

#card{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    transform-style: preserve-3d; 
    transition: all 2s; 
    transform-origin: right top; 
} 

#card.flipped{ 
    transform: translateY(100%) rotateX(180deg); 
} 

#card div{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
} 

.front{ 
    background-image: url("https://s-media-cache-ak0.pinimg.com/564x/f1/db/2c/f1db2cddb90fd324cc32cefe1fa066d3.jpg"); 
    background-size: cover; 
} 

.back{ 
    background-image: url("http://4.bp.blogspot.com/_1AgA_BSRr40/TI_YtyvDrnI/AAAAAAAAAkA/MLMj23dgqtM/s1600/hoyleback.jpg"); 
    background-size: cover; 
    transform: rotateY(180deg); 
} 

$("#card").click(function(){ 
      $(this).toggleClass("flipped"); 
     });

我試圖在的jsfiddle，直接從GitHub複製代碼，並得到了同樣的事情。這裏是的jsfiddle： https://jsfiddle.net/dtarvin/0rynwkwa/

<div id="container"> 
     <div id="card"> 
      <div class="front">1</div> 
      <div class="back">2</div> 
     </div> 
    </div> 

#container{ 
      width: 55vmin; 
      height: 80vmin; 
      position: relative; 
      perspective: 3000px; 
      top: 20vh; 
      left: 20vw; 
     } 

     #card{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      transform-style: preserve-3d; 
      transition: all 2s; 
      transform-origin: right top; 
     } 

     #card.flipped{ 
      transform: translateY(100%) rotateX(180deg); 
     } 

     #card div{ 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      backface-visibility: hidden; 
     } 

     .front{ 
      background-image: url("https://s-media-cache-ak0.pinimg.com/564x/f1/db/2c/f1db2cddb90fd324cc32cefe1fa066d3.jpg"); 
      background-size: cover; 
     } 

     .back{ 
      background-image: url("http://4.bp.blogspot.com/_1AgA_BSRr40/TI_YtyvDrnI/AAAAAAAAAkA/MLMj23dgqtM/s1600/hoyleback.jpg"); 
      background-size: cover; 
      transform: rotateY(180deg); 
     } 

$("#card").click(function(){ 
      $(this).toggleClass("flipped"); 
     });

爲什麼工作在Github上的撲克牌，並在昨天Codepen工作，但不起作用今天Codepen和的jsfiddle不起作用？

來源

2017-05-06 David Tarvin

有些東西顯然不一樣。要求我們通過多個版本來找出差異是一個太廣泛的問題 – charlietfl

其實，我剛剛確認問題不在於代碼，而在於瀏覽器。我有一臺Mac，並使用Safari。 Codepen和jsfiddle在Chrome中工作。

來源

2017-05-06 16:07:49

在Github上打牌但在Codepen或jsfiddle上打牌

回答

相關問題