Daily Interaction #31 | 180° Flip Effect on Hover | WebDev For You | Made in Webflow

let's get it done with daily interaction number 31 [Music] hey what's up everyone John with webdev for you and welcome to the daily interactions series where every weekday we build a new interaction or animation in web flow today we're going to go over daily interaction number 31 and we're gonna create a 180 degree flip effect on hover so here I have the example you might notice that the demo page is a bit different as well I thought it's a bit cleaner with some more white space and a few elements in a few different places well showcase the daily interaction so here when I hover over these cards they flip 180 degrees on the y-axis alright so this is what we will be building today so we have the Sydney Opera House and I've gotten some information from Wikipedia we have the Eiffel Tower and the Space Needle alright so yeah with the new demo page you can click here to learn more about becoming a member you can go to the web dev for you social media you can go to web dev for EUCOM here in the lower left and you can go to the different demos here at the bottom alright looks good so first we're gonna build out all the elements for this effect and then we're gonna add the interaction to the elements yeah so to view more daily interactions and premium content visit web dev for ucomm also be sure to subscribe below to receive a notification every time there is a new daily interaction ok so here I have a blank web flow project and I'll go ahead and just hide the top toolbar here so we have more real estate yeah so we have a blank web flow project and we'll start with the daily interaction class naming convention so it's D - the daily interaction number so today is 31 and then the element so every element on this site will have a D - 31 in front of it and this is for consistency purposes and so that we know we're working with daily interaction number 31 all right so the first thing I'll do here is add a section so I'll add an element I'll add a section and I'll give it the class name D - 31 section I'll set the height to 100 V H so it spans the full height of the viewport and it will be the full width as well I could also set it to auto if I wanted some more scroll space and then for the display setting I'll set it to flux I set it to horizontal justify:center and align Center so anything I place within the section will be in the center so the next thing I'll do is add the card so we're gonna build out the card so to do that I'm going to add an element I'm gonna add a div block and I'll give this div block the class name D - 31 card wrapper so first we're going to create a wrapper because we need to create a 3d space for the card to flip it and the way we do this in web flow is to go down to children perspective so if I hover over this question mark here it says activate this on a parent element to enable three 3d transforms for all of its children so this is going to be kind of the 3d space we create for the 3d flip effect so here for the perspective I'm gonna set it to about a thousand I find a thousand works well and because the width of the the card isn't going to be over a thousand pixels a thousand is plenty of space perspective space to have the card flip okay so this will be a bit more clear as we go along you can go to a max of like 2000 or I think even more yeah but a thousand I find works well for this example alright so we have the card wrapper and that's all we need to do for the first element now we want to add the card inside of this wrapper so picture this cut this wrapper as yeah the 3d space so let's add the card so I'll add an element I'll add a div block and I'll give it the class name the - 31 card ok so this is the card and I'm gonna give it a stir width and height so for this I'm gonna say 300 pixels in width and 400 pixels in height all right yeah so that we have the card this is also kind of like a wrapper because we're gonna have a the front of the card and the back of the card inside of this card so it is kind of a wrapper as well and for this I'm going to set it to relative because we're gonna the front of the card is going to be positioned absolute and full and so is the back of the card so by setting it to relative anything inside of it will be relative to it and not relative to some other parent element okay so that's all I needed to do there so now let's add the front of the card and the back of the card so yeah with the card selected here I'll add an element I'll add another div block and I'll call this D - 31 card front because this is going to be the front and for this I'll set it to a position of absolute and full so it fills yeah it fills the entire card and then for the background I'm going to set it to a background color of this kind of purple color and I'm also going to add a border radius so here for the border for the radius I'm gonna say something like 10 pixels yeah 10 pixels looks good so I has a little bit of a corner to it okay so there we have the card front I'm also going to set a display setting of flux justify:center and align Center so we can place an image in the center here so here I'll select the card front I'll add an element and I'll select image and I'll choose an image and for this we will do Sydney the Sydney Opera House okay so that we have the image I could add some alternative text for accessibility options so I could say yes in the image of no icon I kind of Sydney Opera House okay and here I'll just change the width a bit or add some left and right margin or maybe padding yeah we'll do some padding let me take the margin off because we don't need it so here on the right I'm just holding down alt and adding some padding to the left and the right to make it a bit smaller maybe something like 50 okay so there we have the icon in the center and that is the front of the card so now we want to add the back of the card so I'll go into the Navigator oh and the other thing I want to do here because we are flipping these cards we don't want to see the back side of the card we just want to see the front so we want to see the front of the card and when it flips we want to see the front of the back of the card so for the card front I'm gonna go down to transforms I'm gonna click on this gear icon and for back face we're gonna set the visibility mm to none so we don't see the backside of the card right we only want to see the front so when it flips we don't have like the back and the front trying to they're not conflicting with each other we just see the front of each card okay and again this will make a bit more sense in a second yeah so there we have the front of the card now let's add the back of the card so let me go in the Navigator let's take a quick look at the structure and let me give a class name to this image so I'll say D - 31 a card image and let's go yeah so we have the card wrapper that's the 3d space we created because we added a children perspective to it so the card is a child so we can apply 3d effects to it and then inside of the card we're gonna have the front and in the front we have the image so now within the card we want to add the backside so yeah with the card selected here we have the card selected I'll add an element I'll add a div block and I'll call this D - 31 card backed okay and for this we'll also set it to a position of absolute and full and then for the background I'll set it to black and also give it a border radius of 10 pixels all right so there we have the back of the card I'm also going to give it a display setting of flux set it to vertical justify Center and a line Center so I'm gonna add a heading and some text so I wanted to be vertically aligned so that the text or the heading and the text are below each other so here I'll add yeah I'll add an element I'll add a heading and we'll make it an h3 could be yeah each 3 or h4 cuz not like a main heading it's kind of more like a subheading and that's all just name it D - 31 h3 and I'll style it a bit so let's go to typography I'll set it to circular bold set it yep set it to bold here for the font font weight set the color to white and I'll call this Sydney Opera House okay and then with the card selected I'll add an element the card back I'll add a paragraph and I'll style this paragraph let's say circular book and the color of white and let's add some margin to the left and the right something like 30 and will make the text will Center the text all right so now let me go to to Wikipedia so I was gonna yeah with pedia or I can do like Sydney Opera House and yeah we have it right here so I'll just copy it here from Google it says the Sydney Opera House is a multi venue Performing Arts Centre in Sydney New South Wales Australia it is one of the 20th century's most famous and distich distinctive buildings so again this is just for demonstration purposes we could use pretty much anything so yeah Sydney Opera House and then that's the content so I'll double clicking here and paste and then we have the content and I'll just put a dash wikipedia so we know it's from Wikipedia okay so there we have the card the back of the card now for the back of the card we want to flip it 180 degrees so it's the Esso it's behind the front of the card so that when it flips we're gonna have both the front and the back flip 180 degrees so we want them to just rotate so the back needs to initially start at a hundred and eighty degrees okay so to do that we'll select the card back and we'll excuse me we'll go to transforms we'll click the gear icon I don't know here in transforms will click the plus to add a transform will say rotate and we're going to rotate it on the Y so on the so it flips vertically like this okay so on the Y we're going to flip it a hundred and eighty degrees and we still see it right so we see the card and it just flipped 180 degrees we don't want to to see the back side of the card let me see if I got this right so yeah again we want to set the back face visibility two to none so here for the card back we'll go to the gear icon and here for back face we'll set the visibility to not visible okay so see what happened so because the back face visibility is set to visible we see the card the backside of the card and it's flipped right but I don't want to see the backside of the card I just want to see the front so when we rotate yeah we just see the front of the card so here for back face under transform settings we'll say none so we don't see the backside so behind the front of this card the the yeah behind the front of the card is the back of the card so you just kind of have to like visualize this in a way like we're working with 3d ideas so we have the front and then the back and then we're gonna flip them okay all right so hopefully that was all clear so the next thing I'll do is let's go ahead into the interaction right away so we can yeah we can just get into the interaction because we have all the elements so we have the card wrapper the 3d space the card and inside of the card is the front of the card and the back of the card so when I hover over the card wrapper I want the card to flip okay so everything inside of the card will flip with it which is the front in the back so here with a card wrapper selected I'll go into interactions here where it says element trigger I'll click the plus and on mouse hover it's gonna occur on hover we're going to start an animation and here for time the animations will click the plus and here I'll say D - 31 Mouse and so when we mouse in we want the card to flip 180 degrees so here in the navigator I'll select the card let me collapse it here so we have the card inside of the card we have the front and the back yeah so I just want to select the card here go into interactions add a new time to action and I'll say rotate and let me go into here and so we have a bit more real estate yeah so we say rotate and then on the Y we're gonna rotate it 180 degrees okay so it flips 180 and then we can add some easing to it so I'll say like we'll just say YZ for this one and that's it so now if I preview I hover the card flips pretty simple we just kind of worked with the transforms options the back of the card we rotated it 180 180 degrees and then in the interaction when we hover over the card wrapper everything rotates alright yeah so I think that's pretty much it we could do some a bit of more formatting here with the text but we'll just leave it like that for now so we hover we also need to add a hover out animation so I'll close this and on hover out we're going to start in animation I'll duplicate this mouse in and select it here so we have Mouse in two and here I'll just say D - 31 Mouse out select the card and rather than rotating it 180 degrees we'll rotate it back to zero degrees so it goes back to its original rotation or its original state okay and you can work with the easy options to have an interesting easing as it flips but there we go we flip it rotate we hover out it rotates back that's it and we have that nice 3d effect looks good okay so just for demonstration purposes let's go ahead and copy and paste the card wrapper three more times so I'll hide command C to copy and then paste oops yeah and then paste it yeah command C on the card wrapper and paste it two more times in the section and excuse me I'll hold down alt and that's margin maybe let's say let's say something like 15 and I'll just replace the image for each one so this one I'll do a full tower or no uh this one yeah we'll do the Eiffel Tower and for this one we'll do the Space Needle okay and I can give them each alternative text icon of the Eiffel Tower okay and the Space Needle we'll just say icon of the Space Needle all right yeah and that's it and because they already have the interaction applied oh wait now let me go in here yeah so if we wanted the interaction to be applied to all of the cards what we could do is go into the interaction and yet yeah go into the interaction so here I'll select the interaction go into the mouse hover going to mouse in and for the card rather than the selected element we're going to say a class so action will affect multiple elements with this class say class and rather than all so if I preview they'll all rotate at the same time so rather than that rather than having all elements with the same class will say only children with this class so it'll just affect the individual child of each interaction trigger so now yeah because if we go into the navigator we're affecting the card and the card is a child of the card wrapper which is the interaction trigger so it's only affecting the card inside of each interaction trigger it's not a preview and they all rotate okay and we also need to do that for the hover out state so I'll select it select class only children with this class and just to be safe rather than affecting or rather than just making one element a trigger will select the class so any class with the - 31 card wrapper is an interaction trigger it already was before because we just copied and pasted so they all have that green circle with the lightning bolt letting us know it's an interaction trigger so each of them is an interaction trigger so when we hover over it it'll affect the specific card inside of each interaction trigger so just like that we have the effect I can go in and I'll select the card back and scroll down to transforms and I'll just turn off the the 180 degrees so we can edit it okay so here I'll say Eiffel Tower and Space Needle I'm not gonna go and do the Wikipedia thing because you kind of saw how I did that I just researched it yeah so there we have the card back I'll go ahead and apply the rotation so by unchecking this eyeball symbol it removes the rotation which allows us to edit the card back here in web flow but when I turned it on it rotates again and it goes behind the the front of the card alright so there we go that's how we create a 180 degree flip effect in web flow pretty straightforward hopefully yet all that was clear it's a really cool effect and ya can make for really interesting ya effect on your website alright looks good if you have any questions about this tutorial let me know in the comments section for this video or in the forum section for the yeah in the members section in the forum and I'd be happy to discuss or go over anything I went over here alright looks good so yeah that is it for daily interaction number 31 yeah here with this new demo design you can click here and kind of learn more about the membership and things like that and you can go view other demos by clicking down here and the web dev social media or you can go directly to the website here on the left as well alright looks like oh yeah and the other thing yeah I'll showcase this real quick so on different devices if you want to stack the cards differently for the section I'll just go to tablet say vertical we have vertical and rather than the height of auto VH I'll set it to auto and then I'll add some some margin to the top and bottom of the card something like that and yeah then I preview and they're stacked on top of each other okay and you can go to the different devices and they'll stack on top of each other alright so that was just setting the section to not 100 VH we set it to auto so the smaller devices tablet and below and then we just stacked it vertically instead of horizontally and added some margin to the top and the bottom alright looks good just wanted to cover that really quick all right so yeah now it's really the end of the video all right yeah so thanks for watching to view more daily interactions and premium content visit webdev for EUCOM yeah thanks for watching and I'll see you in the next daily interaction [Music]

Channel: WebDev For You

Views: 8,248

Rating: 4.9852943 out of 5

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2018, webflow for beginners, webflow 3d transforms, 3d transforms, 180 flip effect, flip effect on hover, website flip effect, sketch, figma, adobe xd, xd, avocode, invision, website prototyping, webflow animation, made in webflow, webflow interactions, responsive webflow, webflow website, web design in webflow, responsive web design, javascript animations, website builder

Id: GMUWYTOEuM8

Length: 22min 3sec (1323 seconds)

Published: Mon Jan 28 2019