Angular Material Flipping Card

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

You can use angular app or create a new using ng new app-name. We first need an app to create a component.

Create a new component called GameCardComponent using the below command.

The interface consists of an image that represents the ID of the image on the front face of the card. And represents the state of the card.

Notice how the state has multiple values. Our IDE can give us helpful hints by declaring in this way when we are about to assign a value to them in code. It makes the development experience a lot better.

The states will correspond to angular animation states. Tapping on the card will allow us to transition from one state to another.

Making a 3D card UI with images

We first need to define a structure in house HTML to game cards for all of that to work by definition, our card has a front and a backside.

By using div for both sides contained in the parent.

There is an img element inside the div. There is a graphic store in my asset folder on the backside.

The front side uses the Unsplash API to fetch the image with id specified in the data.

app.component.html

Generate a new component

Here, the left card is plain and the right card has two sides.

Example:

app.component.html

app.component.css

app.component.ts

Output: