Question

在我的Web Foundations课程中，我们通过制作显示扑克牌正面的扑克牌来了解使用CSS的3D变换，然后，当您点击它时，将翻转并显示背面，然后翻转到再次点击时的正面。工作得很好。这是我的Github链接： https://dtarvin.github.io/3d/index.html （如果它不适合你，请告诉我。）

昨天我正在努力让图像旋转并显示另一张图像。我开始使用代码并在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中没有工作？

Answer 1

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

玩牌翻转在Github上工作但不在Codepen或jsfiddle上

1 个答案: