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

我想做一些“记忆卡”游戏。恢复div后，我需要显示差异图像（或不显示任何内容）。我遇到了这个问题，我设法让我的

img

像那样旋转，但正如我所说的，我需要在还原后隐藏图像。我知道可能有一些解决方法，比如在js中设置超时，然后在图像恢复90度时更改图像，但可能有更简单的方法吗？我使用的是纯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);
};

CSS:

---

如果我理解正确，您希望在翻转时隐藏向后的元素。要实现这一点，您需要向每个子元素添加以下css样式

backface-visibility: hidden;

有关更多信息，请访问

---

示例：

请发布您到目前为止所做的工作。当背面可见性设置为

隐藏时，它会阻止鼠标事件，因此当我使用
onmouseover
-图像抖动时，
onclick
-我无法再次单击。另外：当我想在点击后设置其他图像时该怎么办？我已经在演示中添加了一个示例代码笔，这有帮助吗？是的，很好的示例。唯一的问题是，当我想使用onclick事件来更改图像时，我必须同时在
.front
和
.back
上设置onclick来更改图像。请让我等待其他解决方案：）我无法控制自己，我添加了一个小JS来满足您的最后一个请求；）是的，现在这是最好的解决方案：）。非常感谢。
.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);
}

backface-visibility: hidden;