Переворот карты с видимостью обратной стороны: скрыт ⇐ CSS

[Anonymous]

Я буду признателен за предложения о том, как реализовать эту функцию переворота в моем угловом приложении. В настоящее время он частично работает (см. образец на stackblitz (нажмите, чтобы просмотреть образец). В настоящее время я использую свойство CSS backface-visibiity : Hidden, чтобы скрыть зеркальное отображение при переворачивании, но я думаю, что это скрывает кнопку закрытия из Dom, чтобы при нажатии на кнопку закрытия не вызывалось никаких событий.
Любые советы или предложения о том, как решить эту проблему или другой способ достижения этой цели, будут оценены по достоинству.
Спасибо.
@Component({
standalone:true,
selector: 'app-root',
template: `







`,
imports:[FrontComponent,BackComponent],
animations: [
trigger('flip', [
state('false', style({
transform: 'none'
})),
state('true', style(
{transform: 'rotateY(180deg)'}
)),
transition('false true', animate('500ms ease-in'))
])
]
})
export class App {
flip = false;

updateFlip($event:boolean){
this.flip = $event
}

CSS:
.parent{
position: relative;
backface-visibility: hidden;
}
.child-1{
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.child-2{
position: absolute;
top: 0;
transform: rotateY(-180deg);
width:100%;
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... lty-hidden