问当“翻转”函数调用时，静态卡不会翻转
EN

Stack Overflow用户

提问于 2022-02-02 04:45:21

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

几个小时以来，我一直在努力让我的扑克牌在玩家点击时翻转。当eventListener被触发时，它应该运行flip函数，该函数在卡的前后两面之间切换。我做错了什么？

const playingCards = document.querySelectorAll('.playing-cards');

function flipCard(){;
    this.classList.toggle("flip")
}

playingCards.forEach((card) => card.addEventListener("click", flipCard));

.playing-cards{
    display: inline-block;
    padding: 20px;
    position: relative;
    cursor: pointer;
}
.playing-cards .flip{
    transform: rotateY(180deg);
}
.front-card{
    background-color: aqua;
    width: 300px;
    height: 300px;
    transform: rotateX(0deg);
}
.back-card{
    background-color: greenyellow; 
    width: 300px;
    height: 300px;
    transform: rotateY(180deg);
}
.front-card,
.back-card{
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>

<div class="memory-game">
    <div class="playing-cards">
        <div class="front-card">A</div>
        <div class="back-card"></div>
    </div>

    <div class="playing-cards">
        <div class="front-card">B</div>
        <div class="back-card"></div>
    </div>

    <div class="playing-cards">
        <div class="front-card">a</div>
        <div class="back-card"></div>
    </div>

    <div class="playing-cards">
        <div class="front-card">b</div>
        <div class="back-card"></div>
    </div>


</div>


<body>
    <script src=index.js></script>
</body>
</html>

javascript

css

回答 1

Stack Overflow用户

发布于 2022-02-02 04:48:44

从这里导出的答案

const playingCards = document.querySelectorAll('.playing-cards');

function flipCard() {
  this.classList.toggle("flip")
}

playingCards.forEach((card) => card.addEventListener("click", flipCard));

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.memory-game {
  background-color: transparent;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.playing-cards {
display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;/*clickable-cursor*/
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.playing-cards.flip {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.front-card, .back-card {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.front-card {
  background-color: aqua;

  color: black;
}

/* Style the back side */
.back-card {
  background-color: greenyellow;
  color: white;
  transform: rotateY(180deg);
}

<div class="memory-game">
  <div class="playing-cards">
    <div class="front-card">A</div>
    <div class="back-card"></div>
  </div>

  <div class="playing-cards">
    <div class="front-card">B</div>
    <div class="back-card"></div>
  </div>

  <div class="playing-cards">
    <div class="front-card">a</div>
    <div class="back-card"></div>
  </div>

  <div class="playing-cards">
    <div class="front-card">b</div>
    <div class="back-card"></div>
  </div>
</div>

编辑:添加光标效果

票数 1

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

原文链接：

https://stackoverflow.com/questions/70950611

复制

相似问题

问当“翻转”函数调用时，静态卡不会翻转
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当“翻转”函数调用时，静态卡不会翻转EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当“翻转”函数调用时，静态卡不会翻转
EN