Change image after div is reverted using rotateY (or X)

Issue

I’d like to make some "memory-cards" game. I need to show diffrent image (or show nothing) after my div is reverted. I came across this video, and I managed to make my img spinning like that, but as I said, I need to hide image after revert. I know there could be some workaround-way, like setting timeout in js and then changing image, when image is reverted by 90deg, but maybe is there any simpler way? I’m using pure javascript, so no jQuery 🙂

EDIT:
This is what I managed to do using setTimeout, but this is hacky-way, and not always working as it should so: when I catch the moment when card is not fully reverted and click again, I can see image changing during revert.

enter image description here

Image array shuffle:

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);
};

a = ace, k = king.

Code:

 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);
}

Solution

If I understand correctly you want to hide the element facing backwards when flipped. To achieve that you need to add the following css styling to each of the child elements

backface-visibility: hidden;

More information can be found on MDN

Example: https://codepen.io/MrMohtas/pen/JNYMwY?editors=1100

Answered By – Tom

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.