使用rotateY（或X）还原div后更改图像

Question

我想制作一些“存储卡”游戏。我需要在div恢复后显示不同的图像（或不显示任何内容）。我遇到了这个video，我设法让我的img这样旋转，但正如我所说的，我需要在恢复后隐藏图像。我知道可能有一些解决方法，比如在js中设置超时，然后改变图像，当图像恢复90deg时，但也许有更简单的方法？我使用的是纯JavaScript，所以没有jQuery的:)

编辑： 这是我管理使用setTimeout做的，但是这是哈克的路，而不是一味的工作，因为它应该这样：当我赶上当卡没有完全恢复并再次点击时，我可以在恢复期间看到图像更改。

图像阵列洗牌：

const generateCardsArray = function() { 
    const array = []; 

    for (let i = 0; i < 4; i++) { 
     const imageSuffix = '.jpg'; 
     const aToPushPrefix = '/assets/cards/a'; 
     const kToPushPrefix = '/assets/cards/k'; 
     let aToPush = ''; 
     let kToPush = ''; 

     switch(i) { 
      case 0: 
       aToPush = aToPushPrefix + '_club' + imageSuffix; 
       kToPush = kToPushPrefix + '_club' + imageSuffix; 
       break; 
      case 1: 
       aToPush = aToPushPrefix + '_spade' + imageSuffix; 
       kToPush = kToPushPrefix + '_spade' + imageSuffix; 
       break; 
      case 2: 
       aToPush = aToPushPrefix + '_diamond' + imageSuffix; 
       kToPush = kToPushPrefix + '_diamond' + imageSuffix; 
       break; 
      case 3: 
       aToPush = aToPushPrefix + '_heart' + imageSuffix; 
       kToPush = kToPushPrefix + '_heart' + imageSuffix; 
       break; 
     } 

     array.push(aToPush); 
     array.push(aToPush); 
     array.push(kToPush); 
     array.push(kToPush); 
    } 

    return _.shuffle(array); 
}; 

一个=王牌，K =王。

代码：

window.onload = function() { 
    const gameWrapper = document.getElementById('gameWrapper'); 
    const imagesArray = _.shuffle(generateCardsArray()); 

    imagesArray.forEach(function(image) { 
     const cardWrapper = createEl('div'); 
     cardWrapper.classList.add('card-wrapper'); 

     const cardElement = createEl('img'); 
     cardElement.classList.add('card'); 
     cardElement.src = image; 

     const cardBackSrc = '/assets/cards/card_back.png'; 

     cardElement.onclick = function() { 
      const self = this; 
      self.classList.toggle('hovering'); 
      setTimeout(function() { 
       if (!self.src.includes(cardBackSrc)) { 
        self.src = cardBackSrc; 
       } else { 
        self.src = image; 
       } 

      }, 300); 
     }; 

     cardWrapper.appendChild(cardElement); 
     gameWrapper.appendChild(cardWrapper); 
    }) 
}; 

CSS：

.card-wrapper .card { 
    transition: transform 1s linear; 
    width: 80px; 
    height: 100px; 
} 

.card-wrapper .card.hovering { 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

Answer 1

如果我理解正确的话，你要隐藏翻转时所面临倒退的元素。为了实现这一目标，你需要以下CSS样式添加到每个子元素

backface-visibility: hidden; 

更多信息，请MDN

示例中找到的：https://codepen.io/MrMohtas/pen/JNYMwY?editors=1100