Угловые поля ввода материала не работают при использовании свойства css backface

Question

Я использовал этот пример для создания анимации 3D-флип

<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>

Используя следующее 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);
}

В моем случае у меня есть формы накаждое лицоБез материала все работы будут

Демонстрация без материала

Но когда я добавляю материал, я не могу использовать поля ввода на обратной стороне (нажмите, чтобы перевернуть),

Демонстрация с материалом

Почему-то кажется, что поля ввода с лицевой стороны влияют на поля ввода задней стороны.Я пытался установить z-index, но это не помогло.Любая помощь будет оценена!

Обновление: Должно быть, это была моя ошибка, z-index с пробером на лицах, кажется, работает: 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

Вам нужно добавить событие клика на карточку вместо текста: «Кликните карточку, чтобы перевернуть».Вместо этого добавьте (click)="isFlipped=!isFlipped" к карточке:

<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>

Конечно, вы можете добавить этот прослушиватель щелчков к любому другому элементу, который более подходит, чем вся карточка.Возможно, вам нужно предотвратить распространение события, если вы не хотите, чтобы карта переворачивалась, если вы нажимаете поля ввода или кнопки.Я также добавил прослушиватель кликов в «кнопку забытого пароля» в качестве примера:

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

Вот рабочая демоверсия