How to Webflow: Create 3D boxes with hover animations - Tutorial (2019)

hey everyone welcome to another how to web flow in this video I'm going to be answering Joe's request Joe posted on Twitter saying after being spoiled with web flow interactions I really want the new made by Google store to actually lift the items when I hover over them and I responded with agreed it's really simple to do that inside a web flow and he said if anyone if anyone's gonna do it you should and here I go I'm gonna do it now if you haven't been to the new Google store go to store google.com and this is what we're talking about right and so I'll just show you a little bit of what's happening right here and if you hover over the 3d elements nothing happens okay they're just flat images that go up when the page loads so in this video I'm gonna show you how to create 3d boxes and have a hover effect on them with some sort of animation it's really simple to do if you can get the 3d concept okay so I'm gonna break it down as simple as possible in this video ready to get started here we go all right here we go I'm gonna try to recreate the hero row so first thing I'm gonna do is I'm gonna put a section alright and I'm gonna call this section hero okay I'm gonna skip the navigation bar and I'll just go ahead and make the height say this one like 600 yeah 700 yeah I'll go 700 like that alright and then what I want to do is this is gonna be two columns the first column is gonna be text and the second column is going to be the actual 3d boxes so that's why I'm going to set it to flex box because flex box is only one direction either one row or one column so there we go now that I have one row let's go ahead and set some columns so this is column 1 so I'll just call this flex call 1 and we'll give this basis of like say 300 pixels cool something like that yeah 300 is not enough let's say percentage 40 percent 30 40 all right cool 40 X like that now inside of here needs to be the the content the text and so I'm going to go ahead and add text inside and this is it just copy and paste there we go right so I'll just leave it like that this is just very it's a very very basic run through okay so I'm not gonna do everything exactly like the Google page but this should give you an idea of how to tackle a hero kind of like Google's Google store page alright so this needs to be in the center how to do that is I'm also gonna set this claw column to flex and since it's just a column I can just do vertical like that and set at the center and there we go and it's hitting the side so I'm gonna make sure I'm gonna put some padding there we go I'm gonna put some padding on the sides pretty cool something like that all right now that's done let's go ahead and get into our 3d stuff alright so I'm going to drag in another div block right here into the hero okay so we have the Flex call one and then this still block right here we're gonna call it flex call - okay and we're going to expand so when you click expand like this it takes up the rest of the of the space of the row okay so this one has the bases of 40 so if I make it smaller if like flex column 2 will take up whatever space is left alright so I'm gonna go leave it like this pretty good alright so this one is going to have 3d objects inside of it so how to navel 3d is you whatever the parent of the parent element is you scroll down here to transforms and then you hit the kebab or whatever you call this because you have a hamburger menu so I'm gonna call this a kebab and then the children perspective set that distance to 2000 that means anything inside of this element will be 3d okay cool no glass is necessary all right so let's go ahead and make our first 3d object now just to start so you can understand 3d I'm going to make this flex as well and set it to Center in justify:center all right so anything I put in here will be the very it'll be in the very center of the element okay and let's call this let's call this box okay now that I have a box let's let's copy let's start with a simple box like 200 pixels by 200 pixels simple okay now let's go ahead in make this position relative okay because I'm going to have two layers I'm going to have two extra divs inside of this that's going to be position:absolute so it needs a target and this box is going to be the target by using relative alright let's change this that combo class because I'm going to reuse this box class later but let's add a combo class of let's say pink ish yeah something like that all right and let me just get the color from the google page alright got it and so pinkish is going to be this color the pepto-bismol and now I want to add two other divs so this first div is going to be one of the sides of the the box of 3d box and then the other side is gonna be the other side of the 3d box okay it'll make sense as I go along don't follow him follow me so I'm gonna put another div box a div block inside the box and this one is going to be with 200 okay and the height I'm gonna double it to 400 okay now I'm going to make the position:absolute set it to the top left and notice see how it's targeting the box that's what I mean by relative okay and the top is going to be 200 pixels okay so I'm moving it see I'm moving it down to 200 because I want it there and let's call this box BL for bottom-left all right let's put in another box or div block inside that box and we'll call this bottom BR for bottom right and this one is going to be the opposite instead of with 200 it's going to be with 400 and the height 200 okay so you have this guy and then you have this guy and I'm going to set the position to absolute and I'll push it from the left 200 pixels and there we go okay let's color them so this one let's give it a background color of like say this and then the bottom right a little bit darker something like that okay now think of it like old paper dolls okay everything was everything in paper dolls you know is flat but when you fold them in this one's gonna fold in and this one's gonna fold in to the point where these two sides are gonna touch when you fold them in in a 3d space they're able to touch okay so it's like paper dolls all right so now you're ready for the three deenis you ready you ready here we go I'm gonna click on this box in four let me go back to hold on let me go back to let me click this okay there we go I'm gonna go back to its parent class box okay and now here we go I'm gonna click on transforms plus rotate and watch the three deenis here we go 3d okay so I'm taking that X and I'm just playing around with it until it looks like something good okay so I'm gonna do something like this and now with the Y now I'm gonna leave the y 0 and then the Z there we go play around a little more like that okay and now like I said paper dolls okay you ready I'm gonna go to this bottom left and I'm going to swing it in and how we're gonna do this though is we're gonna set a transform setting to this and we need to set the origin to the top okay so the origin right here that's the top center so that's right here okay and so when I do that when I play around with the rotate it'll be anchored from there okay so I'm gonna press plus rotate and now I think it's the is it ex yes ex see now you have that swing swinging effect yeah you gotta make that squeaky noise okay promise me you'll do the squeaky noise when you play around with this alright so I'm gonna set it to 90 easy number and I'm just going to do the same thing with this but instead of the X I'm going to do it on the Y alright so take this transform the origin is going to be on the left because it's on this side not here ok and press Plus on transforms rotate and Squiggy Squiggy Squiggy okay 90 boom done see 3d box okay and you know what for this I can I can cut it off so I don't see the end of this so with the hero right here selected I can click on overflow:hidden and there we go I can take this guy and actually go back to flex calling to how I have it centered let's push it to the bottom boom cool and when I hover let's go here okay so I want an animation when I hover over this it should go up okay so let's go ahead and set a transition type transform so now let's change the easing to something nicer will say ease out let's go out Quint something like that that seems a bit a bit fast okay I'm gonna do ease out Quint yeah court and then set this to 400 okay so that's my timing for any transforms that I change this will animate any transforms that I change alright now we're gonna set this to hover and I'm gonna press plus and on the Y I'm just gonna bring it up a little bit like that cool done so now I'm preview there you go not too hard alright now let's do one more shape alright let's let's put something else inside of here alright see what's this this horizontal okay cool let's put another box actually yeah let me just copy and paste this box copy paste now we have two boxes even more 3d nests like that mmm Lu dupa D D okay um let's go ahead and duplicate this class and we'll call this green let me get the green color from the page cool got it change the color boom there we have green now let's make this more of a rink rectangle okay so I'm going to make the height 400 mm don't want it that way no I want the other way let's go with 400 cool and now I just need to change this so I'm gonna say I don't know green BL okay and I think it's the width yeah so the width will be 400 and the height we can keep it at 400 that's fine and then the bottom right we can go ahead and set the I think that's everything is already okay I just need to move this to the to the right more yeah there we go cool now I have two different shapes and they're overlapping and it looks very 3d alright wait are we missing one guy no oh because I moved them both I didn't give it a combo class let me put them back 200 there we go so green BR and this has to be pushed double there we go okay so 3ds not too hard okay so have fun with it and yeah I hope this helps okay that's it hopefully you understood what was going on again it's like paper dolls and then you're cutting them out and then you're folding them so sides can touch together in a 3d space so 2d becoming 3d let me know if you have any questions about this video by leaving a comment below or if you have an idea for a future video leave that too but more importantly if you are using any of the tricks I'm showing you on my channel put a link to your project I would love to see what you're doing other than that thank you so much for watching if you want to continue supporting me please click on the subscribe button like and the notification bell you can follow me on twitter at the pixel geek and yeah that's about it so thank you so much I'll see you in the next video and as always make the web beautiful together see ya

Channel: pixelgeek

Views: 6,269

Keywords: graphic design, webflow tutorial, web design, modal, webflow interactions, css 3d, 3d animations, lightbox, pixel geek, 3d, design, how to, webflow, responsive web design, web development, pixelgeek, webflow tutorial 2019, html, css

Id: B-jVyklIzDU

Length: 16min 24sec (984 seconds)

Published: Wed Oct 16 2019