html 

<div(click)="flip()"class="animate__animated cursor--pointer"[ngClass]="{ animate__flipInX: isFlipped }"
><div *ngIf="!isFlipped">正面</div><div *ngIf="isFlipped">背面</div>
</div>

component.ts

 isFlipped: boolean = false;flip() {this.isFlipped = !this.isFlipped;}

安装插件

https://animate.style/

在angular.json中使用

"styles": ["node_modules/animate.css/animate.min.css","src/styles.scss",],

以上：从正面翻转到背面看得到翻转，但从背面翻转到正面

如果加上另一个方向翻装，div会消失