我正在尝试创建一个翻盖卡，以最大限度地扩大网页空间。当我切换flipCard功能时，卡片会翻转，但不会显示背面，正面仍然可见，但会镜像。有人知道为什么会发生这种事吗？卡片正面由标题组成，背面为UL。
谢谢你的帮助和时间！
const card = document.getElementById("card")
card.addEventListener("click", flipCard);
function flipCard() {
card.classList.toggle("flipCard");
}.cards {
background: linear-gradient(
to bottom,
rgba(52, 52, 52, 0.4),
rgba(52, 52, 52, 0.1));
backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
position: relative;
transform-style: preserve-3d;
transition: all 0.8s ease;
z-index: 10;
perspective: 1000px;
width: 400px;
}
.card-front {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
backface-visibility: hidden;
z-index: 0;
}
.card-back {
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(180deg);
backface-visibility: hidden;
z-index: 0;
}
.flipCard {
transform: rotateY(180deg);
}
.card.b {
flex-direction: column;
}
.ul-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
font-size: 12px;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
padding: 3px;
grid-gap: 0.5rem;
position: relative;
}
.d {
grid-column: 2;
grid-row: 6;
padding: 0 2rem;
}
.d li {
font-family: 'Oswald', sans-serif;
font-size: 1rem;
}<div id="card" class="cards d">
<div class="card-front">
<h1>
This is the front!
</h1>
</div>
<div class="card-back ul-grid">
<ul><span class="text-secondary">SM.PINKY</span>
<li><span class="text-alt">(1)</span> $1.50</li>
<li><span class="text-alt">(6)</span> $8.50</li>
<li><span class="text-alt">(12)</span> $16</li>
</ul>
<ul><span class="text-secondary">PINKY</span>
<li><span class="text-alt">(1)</span> $1.50 </li>
<li><span class="text-alt">(6)</span> $8.50 </li>
<li><span class="text-alt">(12)</span> $16 </li>
</ul>
<ul><span class="text-secondary">FUZZY</span>
<li><span class="text-alt">(1)</span> $2.00 </li>
<li><span class="text-alt">(6)</span> $11.50</li>
<li><span class="text-alt">(12)</span> $22</li>
</ul>
<ul><span class="text-secondary">HOPPER</span>
<li><span class="text-alt">(1)</span> $2.50 </li>
<li><span class="text-alt">(6)</span> $14.50</li>
<li><span class="text-alt">(12)</span> $28</li>
</ul>
<ul><span class="text-secondary">SMALL</span>
<li><span class="text-alt">(1)</span> $3.00 </li>
<li><span class="text-alt">(6)</span> $17.50</li>
<li><span class="text-alt">(12)</span> $34</li>
</ul>
<ul><span class="text-secondary">MEDIUM</span>
<li><span class="text-alt">(1)</span> $3.50 </li>
<li><span class="text-alt">(6)</span> $20.50</li>
<li><span class="text-alt">(12)</span> $40</li>
</ul>
<ul><span class="text-secondary">LARGE</span>
<li><span class="text-alt">(1)</span> $4.00 </li>
<li><span class="text-alt">(6)</span> $23.50</li>
<li><span class="text-alt">(12)</span> $46</li>
</ul>
<ul><span class="text-secondary">JUMBO</span>
<li><span class="text-alt">(1)</span> $4.50 </li>
<li><span class="text-alt">(6)</span> $26.50</li>
<li><span class="text-alt">(12)</span> $52</li>
</ul>
</div>
</div>我不知道为什么，但删除backdrop-filter可以使其工作。
请阅读更多关于这个问题的文章
您可以使用CCD_ 2作为变通方案，我已经更新了代码。。。
const card = document.getElementById("card")
card.addEventListener("click", flipCard);
function flipCard() {
card.classList.toggle("flipCard");
}.cards {
background: linear-gradient(
to bottom,
rgba(52, 52, 52, 0.4),
rgba(52, 52, 52, 0.1));
/*backdrop-filter: blur(10px);*/
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
position: relative;
transform-style: preserve-3d;
transition: all 0.8s ease;
z-index: 10;
perspective: 1000px;
width: 400px;
}
.card-front {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
backface-visibility: hidden;
z-index: 0;
}
.card-back {
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(180deg);
backface-visibility: hidden;
z-index: 0;
}
.flipCard {
transform: rotateY(180deg);
}
.card.b {
flex-direction: column;
}
.ul-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
font-size: 12px;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
padding: 3px;
grid-gap: 0.5rem;
position: relative;
}
.d {
grid-column: 2;
grid-row: 6;
padding: 0 2rem;
}
.d li {
font-family: 'Oswald', sans-serif;
font-size: 1rem;
}<div id="card" class="cards d">
<div class="card-front">
<h1>
This is the front!
</h1>
</div>
<div class="card-back ul-grid">
<ul><span class="text-secondary">SM.PINKY</span>
<li><span class="text-alt">(1)</span> $1.50</li>
<li><span class="text-alt">(6)</span> $8.50</li>
<li><span class="text-alt">(12)</span> $16</li>
</ul>
<ul><span class="text-secondary">PINKY</span>
<li><span class="text-alt">(1)</span> $1.50 </li>
<li><span class="text-alt">(6)</span> $8.50 </li>
<li><span class="text-alt">(12)</span> $16 </li>
</ul>
<ul><span class="text-secondary">FUZZY</span>
<li><span class="text-alt">(1)</span> $2.00 </li>
<li><span class="text-alt">(6)</span> $11.50</li>
<li><span class="text-alt">(12)</span> $22</li>
</ul>
<ul><span class="text-secondary">HOPPER</span>
<li><span class="text-alt">(1)</span> $2.50 </li>
<li><span class="text-alt">(6)</span> $14.50</li>
<li><span class="text-alt">(12)</span> $28</li>
</ul>
<ul><span class="text-secondary">SMALL</span>
<li><span class="text-alt">(1)</span> $3.00 </li>
<li><span class="text-alt">(6)</span> $17.50</li>
<li><span class="text-alt">(12)</span> $34</li>
</ul>
<ul><span class="text-secondary">MEDIUM</span>
<li><span class="text-alt">(1)</span> $3.50 </li>
<li><span class="text-alt">(6)</span> $20.50</li>
<li><span class="text-alt">(12)</span> $40</li>
</ul>
<ul><span class="text-secondary">LARGE</span>
<li><span class="text-alt">(1)</span> $4.00 </li>
<li><span class="text-alt">(6)</span> $23.50</li>
<li><span class="text-alt">(12)</span> $46</li>
</ul>
<ul><span class="text-secondary">JUMBO</span>
<li><span class="text-alt">(1)</span> $4.50 </li>
<li><span class="text-alt">(6)</span> $26.50</li>
<li><span class="text-alt">(12)</span> $52</li>
</ul>
</div>
</div>可能不是100%的效率，但这符合您所描述的
const card = document.getElementById("card")
card.addEventListener("click", flipCard);
function flipCard() {
let cInner = card.querySelector('.card-flip-inner');
let cfront = card.querySelector('.card-front');
let cback = card.querySelector('.card-back');
cInner.classList.toggle("flipped");
cfront.classList.toggle("hidden-card");
cback.classList.toggle("shown-card");
}.cards {
background: linear-gradient( to bottom, rgba(52, 52, 52, 0.4), rgba(52, 52, 52, 0.1));
backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transform-style: preserve-3d;
z-index: 10;
perspective: 1000px;
width: 400px;
}
.card-flip-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all 0.8s ease;
/*transition: transform 0.8s;*/
transform-style: preserve-3d;
}
.flipped {
transform: rotateY(180deg);
}
.card-front {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
backface-visibility: hidden;
z-index: 0;
}
.card-back {
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(180deg);
backface-visibility: hidden;
z-index: 0;
}
.flipCard {
transform: rotateY(180deg);
}
.card.b {
flex-direction: column;
}
.ul-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
font-size: 12px;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
padding: 3px;
grid-gap: 0.5rem;
position: relative;
}
.d {
grid-column: 2;
grid-row: 6;
padding: 0 2rem;
}
.d li {
font-family: 'Oswald', sans-serif;
font-size: 1rem;
}
.shown-card {
visibiiity: visible;
backface-visibility: hidden;
}
.hidden-card {
visibiiity: visible;
backface-visibility: hidden;
}<div id="card" class="cards d">
<div class="card-flip-inner">
<div class="card-front shown-card">
<h1>
This is the front!
</h1>
</div>
<div class="card-back ul-grid hidden-card">
<ul><span class="text-secondary">SM.PINKY</span>
<li><span class="text-alt">(1)</span> $1.50</li>
<li><span class="text-alt">(6)</span> $8.50</li>
<li><span class="text-alt">(12)</span> $16</li>
</ul>
<ul><span class="text-secondary">PINKY</span>
<li><span class="text-alt">(1)</span> $1.50 </li>
<li><span class="text-alt">(6)</span> $8.50 </li>
<li><span class="text-alt">(12)</span> $16 </li>
</ul>
<ul><span class="text-secondary">FUZZY</span>
<li><span class="text-alt">(1)</span> $2.00 </li>
<li><span class="text-alt">(6)</span> $11.50</li>
<li><span class="text-alt">(12)</span> $22</li>
</ul>
<ul><span class="text-secondary">HOPPER</span>
<li><span class="text-alt">(1)</span> $2.50 </li>
<li><span class="text-alt">(6)</span> $14.50</li>
<li><span class="text-alt">(12)</span> $28</li>
</ul>
<ul><span class="text-secondary">SMALL</span>
<li><span class="text-alt">(1)</span> $3.00 </li>
<li><span class="text-alt">(6)</span> $17.50</li>
<li><span class="text-alt">(12)</span> $34</li>
</ul>
<ul><span class="text-secondary">MEDIUM</span>
<li><span class="text-alt">(1)</span> $3.50 </li>
<li><span class="text-alt">(6)</span> $20.50</li>
<li><span class="text-alt">(12)</span> $40</li>
</ul>
<ul><span class="text-secondary">LARGE</span>
<li><span class="text-alt">(1)</span> $4.00 </li>
<li><span class="text-alt">(6)</span> $23.50</li>
<li><span class="text-alt">(12)</span> $46</li>
</ul>
<ul><span class="text-secondary">JUMBO</span>
<li><span class="text-alt">(1)</span> $4.50 </li>
<li><span class="text-alt">(6)</span> $26.50</li>
<li><span class="text-alt">(12)</span> $52</li>
</ul>
</div>
</div>
</div>