文章/答案/技术大牛

发布

社区首页 >问答首页 >记忆游戏:为什么在我的CSS代码中翻牌不起作用

问记忆游戏:为什么在我的CSS代码中翻牌不起作用
EN

Stack Overflow用户

提问于 2020-12-10 06:12:14

回答 1查看 44关注 0票数 0

我正在试着用HTML+CSS+JAVASCRIPT做一个记忆游戏，我不能让纸牌翻转。我想在点击的时候翻牌。我试过官方文档，但我不知道为什么它不起作用。谢谢你帮我这个忙。这是我的代码：

HTML：

<body>
  <section class="memory-game">
    <div class="memory-card">
      <img class="front-face" src="img/avocado.svg" alt="Aurelia" />
      <img class="back-face" src="img/avocado.svg " alt="JS Badge" />
    </div>
    <div class="memory-card">
      <img class="front-face" src="img/artichoke.svg" alt="Aurelia" />
      <img class="back-face" src="img/artichoke.svg" alt="JS Badge" />
    </div>

    <div class="memory-card">
      <img class="front-face" src="img/berries.svg" alt="Vue" />
      <img class="back-face" src="img/berries.svg" alt="JS Badge" />
    </div>
    <div class="memory-card">
      <img class="front-face" src="img/carrot.svg" alt="Vue" />
      <img class="back-face" src="img/carrot.svg" alt="JS Badge" />
    </div>

    <div class="memory-card">
      <img class="front-face" src="img/corn.svg" alt="Angular" />
      <img class="back-face" src="img/corn.svg" alt="JS Badge" />
    </div>
    <div class="memory-card">
      <img class="front-face" src="img/garlic.svg" alt="Angular" />
      <img class="back-face" src="img/garlic.svg" alt="JS Badge" />
    </div>

    <div class="memory-card">
      <img class="front-face" src="img/grapes.svg" alt="Ember" />
      <img class="back-face" src="img/grapes.svg" alt="JS Badge" />
    </div>
    <div class="memory-card">
      <img class="front-face" src="img/grenade.svg" alt="Ember" />
      <img class="back-face" src="img/grenade.svg" alt="JS Badge" />
    </div>

    <div class="memory-card">
      <img class="front-face" src="img/lemon.svg" alt="Backbone" />
      <img class="back-face" src="img/lemon.svg" alt="JS Badge" />
    </div>
    <div class="memory-card">
      <img class="front-face" src="img/melon.svg" alt="Backbone" />
      <img class="back-face" src="img/melon.svg" alt="JS Badge" />
    </div>

    <div class="memory-card">
      <img class="front-face" src="img/orange.svg" alt="React" />
      <img class="back-face" src="img/orange.svg" alt="JS Badge" />
    </div>
    <div class="memory-card">
      <img class="front-face" src="img/papaya.svg" alt="React" />
      <img class="back-face" src="img/papaya.svg" alt="JS Badge" />
    </div>
  </section>
</body>

这是我的css

CSS：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background: #020F59;
}

.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;

  background-color: transparent;
  perspective: 1000px;

}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  transform: scale(1);
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  transform: rotateY(180deg);

  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.memory-game:hover .memory-card {
  transform: rotateY(180deg);
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #3DADF2;
  backface-visibility: hidden;

}

.back-face {
  transform: rotateY(180deg);
}

请给我留下您的意见或答案来解决问题，谢谢！

html

css

回答 1

Stack Overflow用户

发布于 2020-12-10 07:13:57

这个解决方案是可行的。

我只是稍微修改了你的CSS代码，并添加了3行jQuery代码。

不要忘记在您的jQuery标记中加载HTML库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(".memory-card").click(function() {
    $(".memory-card").removeClass('flipped');
    $(this).toggleClass('flipped');
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background: #020F59;
}

.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  background-color: transparent;

}

.memory-card {
  cursor:pointer;  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  transition: transform 0.8s;
  transform-style: preserve-3d;
  width:300px;height:300px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.front-face,
.back-face {
  width: 100%;  height: 100%;
  padding: 20px;  position: absolute;
  border-radius: 5px;  background: #3DADF2;
  backface-visibility:hidden;
}

.back-face {
transform:rotateY(180deg);
}

.memory-card.flipped {
transform:rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <section class="memory-game">
    <div class="memory-card">
      <img class="card front-face" src="https://www.computerhope.com/jargon/r/random-dice.jpg" alt="Aurelia" />
      <img class="card back-face" src="https://www.gamasutra.com/db_area/images/news/2018/Jun/320213/supermario64thumb1.jpg " alt="JS Badge" />
    </div>
        <div class="memory-card">
      <img class="card front-face" src="https://www.computerhope.com/jargon/r/random-dice.jpg" alt="Aurelia" />
      <img class="card back-face" src="https://www.gamasutra.com/db_area/images/news/2018/Jun/320213/supermario64thumb1.jpg " alt="JS Badge" />
    </div>

  </section>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65225693

复制

相似问题

问记忆游戏:为什么在我的CSS代码中翻牌不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问记忆游戏:为什么在我的CSS代码中翻牌不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问记忆游戏:为什么在我的CSS代码中翻牌不起作用
EN