Angular – CSS Flip Card

Overview

This is a combination of CSS and a Material card that flips when you click on an icon button in the upper right hand corner.

Install Angular Material

ng add @angular/material

Generate a new component

ng g c grid-car-layout

In the grid-card.layout.module.css

.grid-container {
  margin: 20px;
}

.dashboard-card {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
}

.more-button-right {
  position: absolute;
  top: 5px;
  right: 10px;
}

.flippable-card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.flippable-card mat-card {
  margin: 0;
  display: block;
  position: absolute;
  backface-visibility: hidden;
}

.flippable-card .back {
  background: #fff;
  transform: rotateY( 180deg );
}

.flippable-card.flipped {
  transform: rotateY( 180deg );
}

grid-card.layout.module.ts

  flipped: boolean;

  constructor() { }

  ngOnInit() {
    this.flipped = false;
  }

Left card is plain and the right card has two sides.

grid-card.layout.module.html

<div class="grid-container">
  <mat-grid-list cols="2" rowHeight="100px">

    <mat-grid-tile [colspan]="1" [rowspan]="2">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>

          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div>
          </div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>


    <mat-grid-tile [colspan]="1" [rowspan]="2" >
      <div class='flippable-card' [ngClass]="{'flipped':flipped}" >
    <mat-grid-tile [colspan]="6" [rowspan]="3">
        <div class='flippable-card' [ngClass]="{'flipped':flipped}" >
            <mat-card class="dashboard-card">
              <!-- <mat-card-title><button class="more-button" mat-icon-button (click)='flipped = !flipped'><mat-icon>flip</mat-icon></button></mat-card-title> -->
              <mat-card-title>
                <button class="more-button-right" mat-icon-button (click)='flipped = !flipped'><mat-icon>flip_camera_android</mat-icon></button>
              </mat-card-title>
              <mat-card-content>
                 FRONT SIDE
              </mat-card-content>
            </mat-card>
            <mat-card class='dashboard-card back'>
              <mat-card-title>
                <button class="more-button-right" mat-icon-button (click)='flipped = !flipped'><mat-icon>flip_camera_android</mat-icon></button>
              </mat-card-title>
              <mat-card-content>
                   BACK SIDE
              </mat-card-content>
            </mat-card>
        </div>
      </mat-grid-tile>   
  </mat-grid-list>
</div>