11/9/2022 0 Comments Data creator khan![]() ![]() The card should rotate and show its two faces like a real card should! Then, use the up and down keys on your keyboard or your mouse wheel to change the values. Just ng serve the app and add a transform of rotateY to the card div. To test out whether the flipping card works, we can utilize Chrome’s Developer Tools (F12 on Windows) by applying different degrees of rotation to our card div. The 3D card with the back face showing Testing it out! All we need to do now is to apply a rotation transform to the card div, so that our whole setup rotates to show the two faces of the card. But the good thing is we have the card UI all setup with 3D perspective. Lastly, we need to add the backface-visibility: hidden property to our card faces, so that when any is rotated away from us to show its back, it is hidden from our view (and the other side is shown instead). Then, in 3D space, we apply rotation transform of 180 degrees to the front section so that it is effectively hidden from our view initially. The face is basically used to give an absolute positioning to our sections, so that they overlap each other. Third, we need to style the face, front and the back sections. Other properties are fairly standard, so I’ll not cover them in detail! Second, we spice up our card a bit by introducing some box shadows and a border radius to give us those nice rounded borders. Both of these, when combined give all our nested elements a 3D look to them! And we also apply a special CSS property called transform-style: preserve-3d to our card div. This we accomplish by applying a perspective property to our host selector. This looks like a lot, so let’s go through it carefully.įirst, we convert our card to a 3D card. The tricky part is in the CSS, where we add some 3D magic to it.īox-shadow: 10px 10px 43px -18px rgba(0, 0, 0, 0.75) The front side uses the Unsplash API to fetch the image with the Id specified in our data. You can use any graphic you want as the back side of the card. The back side has a graphic stored in my assets folder. How do we accommodate this in HTML? By using divs for both sides contained in a parent div. By definition, our card has to have a front and a back side. This will allow us to transition from one state to another when we tap on the card.īut for all of that to work, we first need to define a structure in HTML to house the game card. Lastly, the states here will correspond to our angular animation states as well. This makes the development experience much better! Declaring the type in this way allows our IDE to give us helpful hints when we’re about to assign values to them in code. Notice how the state can have multiple values. And the state – which represents the current state of the card. Very simple! The interface contains an imageId, which represents the id of the Unsplash image we’ll be loading on the front face of the card. State: 'default' | 'flipped' | 'matched' It is a best practice in Angular to define your interfaces, so let’s go ahead and define our card interface. Then, let’s create a new component called GameCardComponent using the following command. You can use your own Angular app or create a completely new one using ng new app-name. To create a component, we first need an app. We’re going to learn a bit about 3D in CSS coupled with angular animations so we can get the following desired effect!Ĭool, right? Let’s start by creating our card component. In this article, I’m going to explain how I created a card component used in the game which flips to reveal the front side when you tap it. I wanted to see how we can go about making a game and thought it would be something different from the usual enterprise apps built in the popular framework. Recently, I created a card memory game in Angular. But when you’re developing games, they are an absolute must! Animations add a nice touch to any application, if they’re used in suitable places and not overdone. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |