Github上で動作するカードフリップを演奏するが、Codepenやjsfiddleではない

Question

私のWeb Foundationsクラスでは、CSSを使用して3次元変換について学びました。トランプカードの前面を示すトランプカードを作成し、ひっくり返って背中を見せてから、もう一度クリックすると正面に移動します。うまくいった。ここでは私のGithubのリンクは次のとおりです。 https://dtarvin.github.io/3d/index.html （それはあなたのために動作しない場合は私に知らせてください。）私は周りの画像スピンを持つ、別の画像を表示するに取り組んでいた

昨日。私はこのコードを使い、Codepenで修正しましたが、Githubコードには触れず、コピーして貼り付けました。私が何かを変更する前に、トランプカードはCodepenで働いていました。私がそれを修正した後、私はイメージスピナーを動作させましたが、私はそれをさらに使いたいと思っていました。私はここで助けを求めましたが、もう一度コードを修正した後、スピナーは正しく動作しませんでした。だから私は、スピナーが動作していないときのコードに戻ろうとしましたが、再び動作させることができませんでした。

今朝からやり直すことにしました。私はGithubコードを新しいCodepenファイルにコピーしました。厳密に同じコード（私は行ごとに検証した）。しかし、それはGithubで動作し、動作するはずですので、Codepenで同じ方法で動作していません。カードをクリックすると、それが裏返されますが、カードの背面を表示するのではなく、正面の反転イメージが表示されます。ここで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"); 
     }); 

私はGitHubのから直接コードをコピーし、jsfiddleでそれを試みたが、同じことを得ました。ここ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では動作しませんか？

Answer 1

実際、問題はコードではなくブラウザであることが確認されました。私はMacを持っていてSafariを使っていた。 CodepenとjsfiddleはChromeで動作します。