How to rotate a card with css transform inside memory game

Question

I'm building a memory game in Angular. I've attached the component's logic, css and html below. I'm trying to get the cards to flip but methods online don't work. Any suggestions on how to pull this off? Note that in the data structure for a card there's a isFlipped property set to false. Would appreciate any help, thanks.

 // angular import { Component } from "@angular/core"; // services import { CardService } from "../app/services/cards.service"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title: string = "the tech memory game"; tagline: string = "Time to sharpen up those memory cells!"; cards = []; total_cards_count: number = 3; prevCard = null; isProcessing: boolean = false; flippedCouplesCount: number = 0; constructor(public cardService: CardService) {} ngOnInit() { this.cards = this.cardService.getCards(); console.log(this.cards); } playGame(card, cardDiv) { if (this.isProcessing) return; // flip card card.isFlipped = !card.isFlipped; cardDiv.classList.add('flipped'); // compare cards and check if (this.prevCard) { if (card.name === this.prevCard.name) { this.prevCard = null; this.flippedCouplesCount++; } else { this.isProcessing = true; // if no match- flip cards in 1 sec setTimeout(() => { this.prevCard.isFlipped = false; card.isFlipped = false; this.isProcessing = false; this.prevCard = null; }, 1000); } } else { this.prevCard = card; } if (this.total_cards_count === this.flippedCouplesCount) { console.log('game over'); } } } 

 .container { display: flex; flex-direction: row; justify-content: space-between; /* width: 100%; */ /* transform: rotateY(180deg); */ } .front { position: absolute; } 

 <!--The content below is only a placeholder and can be replaced.--> <section> <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <h3>{{ tagline }}</h3> <!-- <img width="300" alt="Angular Logo" src="> --> </div> <!-- game board --> <div class="container"> <div *ngFor="let card of cards" #cardDiv (click)="playGame(card, cardDiv)" class="cardholder"> <img src="{{ card.img }}" class="front" *ngIf="card.isFlipped"/> <img src="{{ card.cover }}" class="back"/> </div> </div> </section> 

Answer 1

Try to use [class.active]="card.isFlipped" to add a class if card flipped. After you can bind CSS animate to these node children: https://github.com/daneden/animate.css/tree/master/source/flippers flipOutY and flipInY with delay a half of animation time.

Answer 2

You will need a combination of Angular animations and css animations. Adapt the following demo to your need:

DEMO

Typescript:

  ...
  animations: [
    trigger('flipCard', [
      state('true', style({
        transform: 'rotateY(180deg)'
      })),
      state('false', style({
        transform: 'rotateY(0)'
      })),
      transition('true => false', animate('800ms ease-out')),
      transition('false => true', animate('800ms ease-out'))
    ])
  ]


...

  flip(index) {
    this.cards[index].isFlipped = !this.cards[index].isFlipped;
  }

HTML

<div class="container">
    <div *ngFor="let card of cards; let i=index" #cardDiv class="cardholder">
        <div class="card" (click)="flip(i)" [@flipCard]="card.isFlipped">
            <div class="card-title front">
                {{card.name}} Front
            </div>
            <div class="card-title back">
                {{card.name}} Back
            </div>
        </div>
    </div>
</div>

CSS:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 200px;
    width: 100%;  
    /* transform: rotateY(180deg); */
}

.card-wrapper {
    perspective: 800px;
}

.card {
    border-radius: 8px;
    position: relative;
    height: 200px;
    width: 120px;
    transform-style: preserve-3d;
}

.card-title {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    text-align: center;
    border-radius: 8px;
    color: white;
    user-select: none;
    cursor: pointer;
    line-height: 100px;
    font-size:30px;
}

.front {
    background-color: #255C85;
}

.back {
    background-color: #ED254E;
    transform: rotateY(180deg);
}