JavaScript 卡翻转：卡背面数据在卡外

Question

我试图在正面和背面之间翻转卡片，每个卡片上显示不同的数据。然而，我的代码现在并排显示正面和背面，当我单击卡片时，它会将其翻转，但所有内容都颠倒了。所以我需要将卡片背面的数据移到卡片中，并在翻转后显示它。

我的 HTML 只有卡片的容器。

<h1>POKEDEX</h1>

<div id="poke_container" class="poke_container"></div>

这是我的 JavaScript 函数，它从 API 获取数据，以及卡片正面和背面的 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>

    `;

这是我的CSS。大多数只是针对卡片设计，但翻转应该是针对卡片背面。现在它只是翻转卡片，但只显示正面的镜像版本，而不是背面的数据。

Answer 1

我认为你的问题是backface-visibility将其设置为隐藏应该可以解决问题。你想要一张翻转卡，对吗？然后创建 3D 透视并使背面不可见。演示（点击翻转按钮翻转卡片）：$("#flip").click(function(){$(".pokemon").toggleClass("flipped")});.card{  width: 400px;  height: 170px;  perspective: 600px;}.pokemon {  transform-origin: center right;  width: 100%;  height: 100%;  position: relative;  transition: transform 1s;  transform-style: preserve-3d;}.pokemon .front{  position: absolute;  height: 100%;  width: 100%;  backface-visibility: hidden;  transform: rotateY(0deg);}.pokemon .flipped{  position: absolute;  height: 100%;  width: 100%;  backface-visibility: hidden;  transform: rotateY(180deg);}.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: translateX(-100%) rotateY(-180deg);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="card">  <div class="pokemon">    <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>    <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>  </div></div><button id="flip">flip!</button>