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>