Jquery 在Github上使用扑克牌翻转，但在Codepen或JSFIDLE上不使用

在我的网络基础课程中，我们学习了如何使用CSS进行3d转换，制作一张显示扑克牌正面的扑克牌，当你点击它时，它会翻转并显示背面，然后再次点击时翻转到正面。很好。以下是我的Github链接： （如果对您不起作用，请告诉我。）

昨天我正在做一个图像旋转并展示另一个图像。我从这个代码开始，在Codepen中修改了它，但我没有接触Github代码，只是复制并粘贴了它。在我修改任何东西之前，扑克牌翻转在Codepen中工作。一旦我修改了它，我让我的图像微调器工作，但我想用它做更多。我在这里寻求帮助，在再次修改一些代码后，微调器工作不正常。所以我试图回到旋转器不工作时的代码，但我无法让它再次工作

今天早上我决定重新开始，所以我把我的Github代码复制到一个新的Codepen文件中。完全相同的代码（我逐行检查并验证）。但它在Codepen中的工作方式与在Github中的工作方式不同，而且应该是这样的。当你点击卡片时，它会翻转过来，但不是显示卡片的背面，而是显示正面的反向图像。以下是代码笔链接：

1.
2.
#容器{
宽度：55vmin；
高度：80vmin；
位置：相对位置；
透视图：3000px；
顶部：20vh；
左：20vw；
}
#卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
过渡：所有2；
变换原点：右上角；
}
#卡片翻了{
变换：translateY（100%）rotateX（180度）；
}
#信用卡部门{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.前线{
背景图像：url（“https://s-media-cache-ak0.pinimg.com/564x/f1/db/2c/f1db2cddb90fd324cc32cefe1fa066d3.jpg");
背景尺寸：封面；
}
.回来{
背景图像：url（“http://4.bp.blogspot.com/_1AgA_BSRr40/TI_YtyvDrnI/AAAAAAAAAkA/MLMj23dgqtM/s1600/hoyleback.jpg");
背景尺寸：封面；
变换：旋转（180度）；
}
$（“#卡”）。单击（函数（）{
$（this.toggleClass（“翻转”）；
});

我在JSFIDLE中尝试过，直接从Github复制代码，得到了同样的结果。以下是JSFIDLE：

1.
2.
#容器{
宽度：55vmin；
高度：80vmin；
位置：相对位置；
透视图：3000px；
顶部：20vh；
左：20vw；
}
#卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
过渡：所有2；
变换原点：右上角；
}
#卡片翻了{
变换：translateY（100%）rotateX（180度）；
}
#信用卡部门{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.前线{
背景图像：url（“https://s-media-cache-ak0.pinimg.com/564x/f1/db/2c/f1db2cddb90fd324cc32cefe1fa066d3.jpg");
背景尺寸：封面；
}
.回来{
背景图像：url（“http://4.bp.blogspot.com/_1AgA_BSRr40/TI_YtyvDrnI/AAAAAAAAAkA/MLMj23dgqtM/s1600/hoyleback.jpg");
背景尺寸：封面；
变换：旋转（180度）；
}
$（“#卡”）。单击（函数（）{
$（this.toggleClass（“翻转”）；
});

---

为什么扑克牌在Github上工作，昨天在Codepen上工作，但今天在Codepen上不工作，在JSFIDLE上也不工作？

事实上，我刚刚确认问题不在于代码，而在于浏览器。我有一台Mac电脑，正在使用Safari。Codepen和jsfiddle在Chrome中工作。

有些东西显然不一样。要求我们检查多个版本以找出差异是一个太宽泛的问题

<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");
        });

<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");
        });