Angular material input fields not working when using css backface property

Question

I used this example in order to make the 3d flip animation

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

Using the following css

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

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

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

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
   background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}

In my case I have forms on each face. Without material all works will

Demo without material

But when I add material I cannot use the input fields on the backface (click on Sign up to flip)

Demo with Material

Somehow it seems that the input fields from the front interfere with the backface input fields. I tried to set an z-index but that didn't do anything useful. Any help would be appreciated!

Update: Must have been my mistake, a prober z-index on the faces seems to work: https://stackblitz.com/edit/angular-backface-material-ekcays?file=src%2Fapp%2Fapp.component.ts

Answer 1

.is-flipped .card__face--front {
  pointer-events: none;
}

https://stackblitz.com/edit/angular-backface-material-yrnnth?file=src/app/app.component.css

Answer 2

You need to add the click-event to the card instead of the text: "Click card to flip". Add this (click)="isFlipped=!isFlipped" to the card instead:

<div class="scene scene--card" (click)="isFlipped=!isFlipped">
  <div class="card" [ngClass]="{'is-flipped': isFlipped}">
    <app-login (reg)="isFlipped = true" class="card__face card__face--front">

    </app-login>
    <app-login (reg)="isFlipped=false" class="card__face card__face--back"></app-login>
  </div>
</div>

You can of course add this click-listener to any other element that is more suitable than the entire card. You probably need to prevent the event from propagating if you don't want the card to flip if you press the input fields or the buttons. I also added a click-listener to the "forgot password button" as an example:

forgotPasswordClick(event: MouseEvent){
    event.stopPropagation();
}

Here is a working demo