【发布时间】：2021-02-19 00:17:44
【问题描述】：
我正在尝试在正面和背面之间翻转卡片，每个卡片上显示不同的数据。但是，我的代码现在并排显示正面和背面，当我单击卡片时，它会将其翻转过来，但只是将所有内容都颠倒过来。所以我需要将卡片背面的数据移动到卡片中，并让它在翻转后显示。
我的 HTML 中只有卡片的容器。
<h1>POKEDEX</h1>
<div id="poke_container" class="poke_container"></div>
这是我从 API 获取数据的 JavaScript 函数，以及卡片正面和背面的 InnerHTML。
function createPokemonCard(pokemon) {
const pokemonEl = document.createElement('div');
const pokemonElBack = document.createElement('div');
pokemonEl.classList.add('pokemon');
const poke_types = pokemon.types.map(el => el.type.name);
const type = pokemon.types[0].type.name;
//const stats = pokemon.stats[0].stat.name;
const ability = pokemon.abilities[0].ability.name;
const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
const card_color = colors[type];
pokemonEl.style.backgroundColor = card_color;
//Card Front data and HTML
const pokeInnerHTML = `
<div class="front">
<div class="img-container">
<img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" />
</div>
<div class ="info">
<span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>
<a href="https://bulbapedia.bulbagarden.net/wiki/${name}_(Pok%C3%A9mon)" class="name"><h3>${name}</h3></a>
<small class="type"><span>${type.charAt(0).toUpperCase() + type.slice(1)}</span></small>
</div>
</div>
`;
pokemonEl.innerHTML = pokeInnerHTML;
poke_container.appendChild(pokemonEl);
// Back of the card data
const pokeCardBack = `
<div class="flipped">
<div class="img-container">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" />
</div>
<div class ="info">
<span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>
<h3 class="name">${name}</h3>
<small class="type"><span>${ability}</span></small>
</div>
</div>
`;
pokemonElBack.innerHTML = pokeCardBack;
poke_container.appendChild(pokemonElBack);
//Flip card from front to back function
const back = document.querySelectorAll('.pokemon');
function flipCard() {
this.classList.toggle('flipped');
}
back.forEach((card) => card.addEventListener("click", flipCard));
}});
这是我的 CSS。大多数只是用于卡片设计，但翻转应该是用于卡片背面。现在它只是翻转卡片，但只显示正面的镜像版本而不是背面的数据。
.poke_container {
display: flex;
flex-wrap: wrap;
align-items: space-between;
justify-content: center;
margin: 0 auto;
max-width: 1200px;
}
.pokemon {
background-color: #eee;
border-radius: 20px;
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
margin: 10px;
padding: 20px;
text-align: center;
transition: transform .3s;
&:hover {
transform: scale(1.2);
}
}
.pokemon .img-container {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 120px;
height: 120px;
text-align: center;
}
.pokemon .img-container img {
margin-top: 20px;
max-width: 90%;
}
.pokemon .info {
margin-top: 20px;
}
.pokemon .number {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
font-size: 0.8em;
padding: 5px 10px;
font-family: 'Josefin Sans', sans-serif;
}
.pokemon .name {
margin: 15px 0 7px;
letter-spacing: 1px;
font-family: 'Cabin', sans-serif;
}
.pokemon .type {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
font-size: 0.8em;
padding: 5px 10px;
font-family: 'Josefin Sans', sans-serif;
}
.pokemon.flipped {
transform: rotateY(-180deg);
}
我希望上面的信息是清楚的。我真的想在 const pokeInnerHTML 和 const pokeCardBack 之间切换。我不确定为什么我的卡背数据现在不在我的卡上。它应该绑定到翻转的 div。
【问题讨论】：
-
看看 css 属性 backface-visibility。 developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility
-
我不认为是这样，我已将其添加到我的 div 中，但它没有效果。卡片的背面是可见的，但由于某种原因它与正面并排。我不确定这是 JavaScript 函数还是 CSS 问题或两者兼而有之。
-
给你：jsfiddle.net/ehn6oma9（我改了一堆东西，关键是把卡片的背面设置为
position: absolute，这样它就出现在与正面相同的位置）跨度> -
这取决于您要实现的目标。如果你想要一张真正的 3D 翻转卡，看看我的回答。如果您只想显示卡片的正面或背面，请在背面显示：无；并在翻转时将可见性更改为显示：none anf front to display: block;
标签： javascript css api