Как повернуть карту с помощью css transform внутри игры с памятью

// 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.info(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.info('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>