So you see the back, we want to get the front in. Now if you're on a smaller screen, for a lot of you it's probably looking something like this with three.

Obviously you can just adjust the grid gap and other things to make that fit the way you want. I'm not going to go over that because we went over how to do all that so you can make it adjust the way you like. I'm going to leave mine the way it is, so let's go ahead and hop into the front card.

Okay we're going to have to do a little bit of refactoring with just our style names. Nothing too big, nothing too serious it will be really easy. We'll get everything working in this video with the flipping and everything okay. So let's go ahead and let's head over to our shopProduct.js file.

Okay, do you see this? What we need to do basically make it so there's two sides in this file. Okay so we want to take all of this content here and cut it out using command X and let's put a div and then let's put it back in. Okay, we just put it within a div of all right, so this is one of the sides. So let's give this a class name of shop-product__back.

Now what we want to do is we need to refactor these styles or it's not going to work. If we go to our application right now nothing's going to look very good or it shouldn't at least. Alright, it still looks good but we need to change it anyway.

So let's go ahead and. Oh it's probably because we didn't save it or I didn't save it. Now let's look at it. All right you'll see everything's kind of messed up with none of our grid.

Okay so we can fix this by just getting all of these shop product instances with in this back div and just replacing them with shop-product_back okay. Now this still won't work because we need to go into our shop-product.scss file and we need to rename this to shop_productback okay. So once you name that at the top on line one in shop-product.scss and you name all of these shop-product_back here it will work.

Okay go back into all and you'll see is back to normal.

Okay so we just did a little bit of refactoring and everything's the same but now we're in a good position to add another one of these cards, another div with a front. So what we want to do is above the back we want to create another div and we need to give this a class name of shop-product__front okay.

In here we will put in an image with a source of http://via.placeholder.com/220x220 okay let's close that off, and then let's put another div and let's say that this has a class name of shop-product_fronttitle okay and in here we'll just throw the title in that we have access to. And then I forgot to add a class name to the image, so let's do that, let's say class name is shop-productfront_image.

All right cool, so now we have our front let's go see what this looks like in our application. Lets hit all, and you'll see we have two sides now except for the top ones a little smaller and it does the correct styles.

All right so let's add some style and let's get this working. Okay, let's go into shop-product.scss and above shop_product_back let's put some space and let's say shop-productfront, in here we will say &image and we will say &_title. So for the title we're going to say color #333 and we will say font size 18 pixels and we will say font family is going to be Titillium Web, and then we're going to say font size 18 pixels.

And then we're going to say there's one more thing I was trying to remember, it might just be, it's not line height, let's go check the design and see what it asks for. Okay so 3, titillium web, font size, text align center obviously we need that. Okay so let's say text align is center, so get these four in and we're good on the title, for the image you don't need to do anything.

shop-products.scss

.shop-product__front {
    &__image {

    }
    &__title {
        color: #333;
        font-size: 18px;
        font-family: 'Titillium Web';
        text-align: center;
    }
}

Let's go check our chrome now and we will see that it looks a little bit better.

Okay, now let's give it this height at least we don't want it to have the white background color because you'll see in the design it's clear, so we don't need that or the box shadow. So let's go to our code and let's say shop-product__front has a height of 314 pixels, a width of 240 pixels, and let's say no background color and that's good.

shop-product.scss

.shop-product__front {
    height: 314px;
    width: 240px;
    &__image {

    }

Now let's check it out in chrome, all right it looks a little better now.

What I want to do is center these because this goes down to here but we need the title to be a little bit more centered. So let's say display is grid, justify items is center, and align items is center.

shop-product.scss

.shop-product__front {
    height: 314px;
    width: 240px;
    display: grid;
    justify-items: center;
    align-items: center;
    &__image {

    }

Okay, now let's see what this looks like, so let's go into Chrome. All right now looks better.

Now let's try and get rid of text align center and see if it works, because I think that it will work, and that it will still be centred, so let's comment that out and you'll see it's still centered because it's only this much width and when we're justifying it is centering perfectly.

All right, now that that's done what we need to do is we need to basically make a grid on the shop product to overlap these two deals, we want to overlap these. So before we do that I want to show you how the flipping works because it'll be a lot more understandable if I do that before we place them on top of each other.

So what we want to do is we want to go into our code here and what we want to do is we want to say okay when we hover over the front and the back they move. So let's say &:hover and then we'll say &__front. Okay and then we'll say that when we hover over the front we're going to transform it and we're going to rotate the y axis and we'll say let's rotate it back 180 degrees.

Let's go see what this does. Okay, and real quick this is in the wrong place because you'll see that we're already in front. So what we can do is we can just get rid of that except for the problem with this is not going to hover over the front, we want to hover over the shop product. So let's copy and cut this and if you remember we have the .shop-product and then we're going to hover over the shop product and then we're going to say hey make the front rotate.

shop-product.scss

.shop-product {
    &:hover &__front {
        transform: rotateY(-180deg);
    }
}

Now if you remember back in shopProduct.js the shop product then we have the front and we have the back, so there's two divs in the shop product, and then there's all their content within those so the shopProduct.js has the front and the back. So let's go see what happens when you hover over the card now, you'll see it automatically flips the front of the card 180 degrees.

So let's go ahead and let's flip the back now. So we want to copy this and then we want to paste it and then we want to say okay let's flip the back end, let's have it flip to 180 degrees, let's see what happens.

shop-product.scss

.shop-product {
    &:hover &__front {
        transform: rotateY(-180deg);
    }
    &:hover &__back{
        transform: rotateY(180deg);
    }
}

Okay it flips them.

Now the problem with this is we want one of these to be hidden and one not to be hidden. So I'm going to introduce you to a property in css called back face visibility. So what we want to do is reference both of these so let's say front and then we have back, and the back face visibility is hidden. So basically what that means is if it's showing the back of the card like if we flip it 180 degrees then we're going to hide it.

So let's go into Chrome and see what that looks like.

All right, you'll see they both disappear because they're flipped. Okay so by default we want to show this front one and then when we hover over it we want to show the back one. So in order to do that we need the back face visibility on the back side to be we want the add to cart the product description there we want that all to be hidden initially so we need to flip it initially.

So let's go into our code and let's say &__back transform. Basically we want to transform it 180 degrees so let's move this transform into there so by default it's going to be 180 degrees. So let me show you what this looks like. See it's already hidden.

Now it's not appearing when we hover over this because we're not really flipping it back. So what we need to do is paste that back in there and change this to zero degrees. So when we hover over it, it flips to zero degrees and since back face visibility is set to hidden and it's hiding the back the front is still visible so it will reappear our card. So let's try this out, let's go to Chrome and you'll see the back appears when we hover over it.

Okay, so that's how that works. What we need to do now is we need to have it kind of transition a bit and then we'll get into the actual flip and then we'll place them on top of each other. Okay so let's go into our application and let's say on front and back they both have a transition property of all .3s ease;.

Okay so it's going to kind of transition that rotation now. So let's go to Chrome and you'll see it flips now, and that might look good to you but at the same time it looks kind of like it's not flipping and it's just like expanding and closing. So I need to introduce to you a property called perspective and that will give it a little perspective and make it look like it's flipping a little bit better.

All right so let's go ahead and go into our code and let's go into shop-product.scss and let's just say perspective is a 150 rem and then let's make sure it works in Mozilla, so in Firefox, and let's say -moz-perspective: 150rem; okay, that will make it look a little bit better. Let's go ahead and see what this looks like. All right, you'll see it looks a lot better. Feel free to go back and forth between those and see what it looks like because it's going to look a little different.

Now let's make sure this is flipping in the right direction because you'll see that they're flipping in opposite directions, at least I think. Let's go ahead and go to our code and let's change this hover front to just 180 degrees and not -180 degrees and let's see what happens. All right, now it's flipped which is not what we want. So we need to do is make them flip in the right direction which means we need to either change this hover front to -180 degrees or this hover back to -180 degrees.

So let's try that on the back initially we want it to be back 180 degrees. So that it will flip forward to 0 and then the front will flip to 180, that way it's kind of like a circle motion okay. Alright let's try this, I think that will work, but I want to go a little bit further and let's say that this is by default 360 degrees and then we're flipping it to 540. Let's see what happens, I guess it's the same thing, whatever. What I want to do is see happens here. I'm just messing around with these degrees just to have fun, but you can do whatever you want obviously.

Okay so I'm going to make it zero degrees and then I'm going to make it by default 180 degrees on the backside and that will give us a good look. Again feel free to do whatever you want, I going to do that because you'll see this is the side basically this is going to be touching the left side of this card. Well what we need to do now to finish this is we just need to basically align them on top of each other which is really easy to do with grid.

So let's go into shop-product.scss and let's just say display is grid and what I'll do to make it easier is I'll just go up here and I'll say put a comment here and I'll say this is for the card flip and then I'll go up here and I'll say place front and back on top of each other. Just so if you look at the commit you'll see where each specific thing goes and it will be easier for you to read.

We're going to say display is grid, grid template rows is 1/-1, grid template columns is 1/-1, and let's just say that they all belong there so let's say and arrow star and we'll insert asterisk or whatever you want to call that and we'll say grid row is 1/-1, and grid column is 1/-1. Okay, feel free to also just type these out, you can also just do this like I did, either way it will work, and let's try this out.

shop-product.scss

//PLACE FRONT AND BACK ON TOP OF EACH OTHER
.shop-product {
    display: grid;
    grid-template-rows: 1/-1;
    grid-template-columns: 1/-1;

    & > * {
        grid-row: 1/-1;
        grid-columns: 1/-1;
    }
}

You'll see now that it flips over and it looks really well, it's kind of amazing actually how simple that was. Just 10 minutes of CSS and you have a card that's flipping that looks really good.

So it's really cool and all I did just barely was switch this to this for minimal syntax. Anyway that looks great, I'm just going to copy this and put it here and then paste it and then change it to the front back method just so you know for sure what's going on here because you might be wondering wait what are all these properties that we're putting on top of each other. So I just want to make sure you know that this is the same thing.

All right so that's how you do that, what we're going to do now is look at Chrome here and we're not going to do anything with the image because we don't have those images but what we'll do is we will move onto the cart component. Now we need to make it so when we hit add to cart it shows a cart and then it basically fills that up with cart products. So let's go ahead and commit our code and then hop into that and the next video.

Terminal

git status
git add .
git commit -m "built front of card and implemented rotation/flip animation ability"

Okay, I'll see you in the next video.

Resources
Source code