当我切换时，背面类被隐藏，而css类发生了变化，但是正面图像没有显示。我愿意对此进行非常基本的解释-有许多我不理解的变量。
我已经查找了rotateY变换和变换样式：preserve-3d。那些不工作。我不知道这是否与特异性有关。
const cards = document.querySelectorAll(".memory-card");
function flipCard() {
console.log("I was clicked!");
console.log(this);
this.classList.toggle("flip");
}
cards.forEach(card => card.addEventListener("click", flipCard));.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
position: relative;
margin: 5px;
transform: scale(1);
transform-style: preserve-3d;
transition: tranform 0.5s;
}
.memory-card:active {
transform: scale(0.97);
transition: transform 0.2s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1c7ccc;
backface-visibility: hidden;
}
front-face {
transform: rotateY(180deg);
}<section class="memory-game">
<div class="memory-card">
<img class="front-face" src="img/ZihauZhu.png" alt="Zihau" />
<img class="back-face" src="img/back-face.png" alt="memory card" />
</div>
<div class="memory-card">
<img class="front-face" src="img/ZihauZhu.png" alt="Zihau" />
<img class="back-face" src="img/back-face.png" alt="memory card" />
</div>
</section>您忘记将.front-face旋转180度，因此由于backface-visibility: none而看不见。我将.memory-card.flip更改为.memory-card:active以展示解决方案。单击卡片以查看最终结果。
.memory-game{
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
position: relative;
margin: 5px;
transform: scale(1);
transform-style: preserve-3d;
transition: tranform .5s;
}
.memory-card:active{
transform: scale(.97);
transition: transform .2s;
}
.memory-card:active {
transform:rotateY(180deg);
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1c7ccc;
backface-visibility: hidden;
}
.front-face {
transform:rotateY(180deg);
}<body>
<section class= "memory-game">
<div class="memory-card">
<img class="front-face" src="https://picsum.photos/200/201"
alt="Zihau"/>
<img class="back-face" src="https://picsum.photos/200/300"
alt="memory card"/>
</div>
<div class="memory-card">
<img class="front-face" src="https://picsum.photos/200/200"
alt="Zihau"/>
<img class="back-face" src="https://picsum.photos/200/300"
alt="memory card"/>
</div>
</section>
</body>