3D CSS - lighting, animations, and more!

we're gonna take these three divs here which don't look like anything special we're gonna add a little bit to them then dive into the css and turn them into this and yes that is with css only there's nothing else going on it is just in css if you want to know how to do that well you're in the right place because that's what we're gonna be doing in this video hello and welcome back my friend and friends and for those who are new to this channel my name is kevin and here on my channel i hope you fall in love with css and if not fall in love with it at least learn enough about it to be less frustrated with it and start writing it with more confidence and a little while ago i looked at a whole bunch of just like mind-blowing code pens i just couldn't believe some of the stuff that people were doing but the whole video was inspired by a tweet i saw by emmett sheen where he made this really really cool 3d animation all css only and i i'm just blown away i i live and breathe css but that type of stuff is just beyond me and uh when i was talking to him about it he said well why don't i come on to your channel and show you how to do it and show your audience how to do it and i just couldn't say no so emmett's gonna be helping me and walking me through the steps and i'm making this happen i am really looking forward to it it's gonna be absolutely incredible and then hopefully from then on i can actually incorporate some of this stuff into future videos and tutorials as well and so yeah let's go see how we can make something that looks like that that three flat objects into a spinning bouncing thing of just wonder all right i just want to say thanks so much for coming and joining me here uh to learn on how we can do some 3d css wizardry as far as i'm concerned um right now we're literally starting with a scene that has three child three children in there we have a floor a cube and a ball and that's it um in the css we just have here our bodies our bodies just here to center whatever we're building on uh wherever we're working on so how do we go from having just a few divs like this to having this wonderful 3d scene that we're going to be building out great so actually let's start by positioning things uh the first thing we the first thing we do is going to give uh do a class of scene and we all we do for now is going to give the class a position of relative because everything else is going to be positioned it's going to be at position absolute but it's going to be relative to the scene but actually let's start with the ball because the ball is going to be on top so let's start with the ball and we'll start by giving him giving it a width and a height now normally what i'm going to what i'm doing doing normally i'm going to show you just for now uh normally i'm just doing a variable size and then everything is relative to this variable so it's size times 2 size times four five times minus one and a half and so on but uh what i've started started doing lately is actually using ends because most of the animations i do don't have text in them and so em it's just a variable so i can just do like one em and in the height and in the body itself i can set a font size of i don't know for example 50 px and when i change the font size everything is going to change accordingly uh so it's just like a variable i'm using the font size as a variable and it's actually working out real real nice so we're going to do it uh now if it's okay uh so the ball has a width and a height and uh let's give it because it's a bold gift let's give it a border radius of 50 and uh and just so we can see let's give it a background color of what um i always use the same the same colors all the time it's a little boring but yeah i'm using white normally because normally i'm just focusing on the shapes you know it's white it's either white black or red um okay so this is the ball let's go and build our box and our box uh again we're going to give it a with any height but we're going to give it like uh like 3 amps or 2 amps for that's probably 3 a.m um and the background color we actually have a variable right here there on the top that's right of the box box color perfect yeah so let's go let's use this variable so it's kind of aqua with the transparency uh i don't think it's written that way oh cube that's why cube there we go ah okay we can change it the color box color we're doing yeah i use camel cases no problem it's my gs uh developer inside of me yeah so uh okay so this is the box and the last thing we do is we're gonna do the floor uh the floor then we again would we have the width and the height with em let's do like 5 a.m actually the box seems a bit bigger uh comparing to the ball so let's do like 2 am uh for the box and i'm going to change the the font size for like 75 so okay now seems more uh in proportion uh so the flow let's do like 5 am and the height 5 am and the background i actually want to do a pattern background so let's do a background image uh um what i want to do is actually use a repeating oops i'm typing in the wrong place uh yeah i'm sorry uh repeating conic uh gradient uh we're gonna start it i i want to do like a checkerboard pattern but in 45 degrees offset so let's start uh from 45 45 degrees and have a dark color for uh let's say from zero degrees to 90 degrees and a little bit lighter color from 90 degrees to 180 degrees so this is the yeah so this is the shape that you see here but obviously what we want to do is do like a uh background size of uh let's say one em uh uh oh one em one i'm sorry yeah okay so yeah so this is the other thing um yeah so this is our three shapes this is the three things that we need to do um i really like to break it down i just i don't have word wrap on so it just makes it a bit easier for to keep it all on the screen okay uh so let's uh let's start positioning everything and everything needs to get positioned absolutely let's start let's start with the box actually uh because the box needs to be straight in the middle okay so let's go to the to the cube uh and give it a position absolute and we can transform it transfer it into place uh with the translate but i think because we have no because we know the width of the height let's give it a top of minus one em and the left of minus one m uh and i think it's gonna be uh just gonna stay there okay uh now let's give a position absolutely to the ball and the floor also because we want to everything to be positioned absolutely absolutely and the ball you're already ahead of me awesome cool that mode is so cool yeah okay yeah collapse cool yeah chris yes um yeah so the ball uh the ball has a position absolute and we need we needed to have the left of minus half am and the top i don't want to to uh define the top because i'm gonna the ball is gonna be bouncing and i'm gonna animate the bottom so let's give the ball a bottom of uh uh like uh i think it's 2 am or 1 am no sorry 1 in and i missed the left what what do we want to do on the left a minus a half a m because the ball width is 1 am and i'm taking oh yeah so okay so now the ball is in place and the last thing we need to position is the floor so in the floor case we do want to use because we're going to play around with size we do want to use the translate method to translate it into uh into position we'll add a transform translate uh minus 50 minus 50 and but uh the the center the very center of the of the floor needs to be the bottom of the box so we we need to to drop it like uh 1 em so we'll give it a top of 1am uh so now yeah top of 1am so now you can see that the center of the of the uh of the floor is right in the in the uh in the middle in the bottom excuse me of the cube and now we need to rotate the floor because the floor it's not a wall it's floor so we need to rotate it 90 degrees so we'll add to the transform uh yeah we'll add a rotate rotate on the x-axis because this is the x-axis right on the x-axis 90 degrees and now we won't see it it's there but it's now it's very very thin it's the width the height it's zero uh so to see it we need to add perspective and there is a few ways to add perspective i saw that you add a perspective to the transform a few uh a few videos ago yeah but it's still like it's still something for me that's a little bit like i'm just guessing to try and get it to work so i i'd love some insight on that so when i do a scene like like we're doing here so i like to do to have the the perspective right on the body and then give each uh uh each uh each element uh position uh position style of preserve 3d so it would uh so i i will have the same perspective all across the elements and be uh unified uh so let's add uh here in the in the body let's say oh oh i'm not actually here uh let's add to the body um perspective of let's say 10 am 10 am so it's like 750 pixels sounds about right so yeah we can actually see the the the floor right now but it's actually very small let's let's make it bigger and let's let's try for uh i'm going to try it like 15 yen for now and okay that's that's nice oh and of course what i've said is we need to give the scene a transform style uh transform style of pre the 3d and oh actually one last thing because i wanted i want to look at that scene a bit from the top so uh let's actually add a perspective origin right here oops origin and we'll do it on the center in the middle and but here we're going to do a little caulk of 50 minus because we want to go up uh let's say two yens so yeah so we didn't saw the changes in the box and the ball but we saw the the floor moved um just just before we move on when you do the perspective origin i really get so you're saying like we're starting in the middle then we're moving up by 2m so it just changes where we're looking at it a little bit but how does that work with the perspective itself like what does the perspective 10 em [Music] uh so the the perspective is you can look at it as as the distance you are from the from the the zero point of the axis uh so if the uh if the perspective would be for example 20 am so it would be like we're looking at it from farther away and the perspective would be more uh less noticeable if we're gonna do it like for five years we're gonna do like we're looking at it from very close and everything's going to be very very skewed perfect that makes a lot of sense yeah okay so the next thing is to build a box a cube now it's not a box it's a cube so uh i'm not going to go in too much into depth i actually have an article i wrote about it in css tricks that explains the how perspective works and uh and how to build the box in css but the the general idea is very simple uh all you do is take six elements six sides and uh and position each size uh relative to the cube itself to the to the cube uh element so right here in the in the markup we'll add six six elements we'll have we'll add a front element we'll add a back right and a top and a bottom okay so now let's go into uh again back to the css into the cube uh uh cube element and yeah inside the cube element let's start with the fourth size so it's the front right left and the back okay so let's start with these fours and and let's do like one class for all four of them because we want to uh to give a lot of uh uh properties that are uh that are uh in all of those forms so let's do a left uh so let us give them a position absolutely because like again the each of them needs to be positions uh relative to the cube so it's a position absolute uh the width and the height needs to be 100 we're going to animate the the height of the box later on and i want the the height to be the same as the width oh it took over okay well you're talking i could fill that in actually we're gonna take the background and remove it from the the background color and remove it from the box to the uh to the elements inside because i don't want the box to have the color so now it's actually looks brighter because it's now four sides on one on top of it another so now let's start positioning them and the easiest one to position is the front one okay because all i need to do with it is to transform it trans form it to do a translate of z because i want to move it forward uh of uh 1 em because the box is 2 am i want to move it half of the f of the width so uh the front oh i'm sorry this is it's not talking about him i'm sorry this needs to be the front okay and and the back oh yeah thank you okay so now yeah now we can see the front move forward yeah it moves forward so uh let's do the right one so the right one all i need to do is to rotate it 90 degrees before i translate it okay so let's do a rotate on the y-axis of 90 degrees um and row yeah so now we have the right and the back side i i can i can also you just translate z and translate it minus one but then the front side of the back won't be the front side of the front if it makes sense yeah i know yep yep you know what i'm talking about yes we need to like do a yeah exactly yeah yeah so cuz when i use like patterned background or whatever if i wanted to be in the same side or maybe if you use back face visibility i want the front to be the front okay so this is the back and the last one will be the left which will be 270 degrees uh yeah so now we have four sides uh the next thing we're gonna do is the top uh like we're gonna do like like this so the top is also i have a position absolute but the width and the height i don't want it to change with the size of the uh uh of the box of the cube so i'm going to give it like 2 amps uh the width and the height so it won't change when when i'm gonna animate the box right right the background is gonna be the same background uh but we're gonna need a transform we're gonna do uh two things uh first we need to translate it up right so it uh translate y uh minus fifty percent and we need to rotate it row rotate on the x-axis 90 degrees so now we have the top and we're going to leave the bottom uh for now alone we're going to get back to it in a second um but this is the first step to position things in this three-way 3d world if we have more objects we can uh translate them and move them inside like maybe to do chess board i don't know this floor makes me think of think of uh yeah yeah but the the directly when we build a 3d scene there's there's two things that we need to do to uh to fool our brands because it's not real 3d it's our flat uh one of them is the perspective and you we can see that the css engine really helps us with it but the next thing is lighting uh lighting is a very uh very strange subject and sometimes a very slight difference can make a very big difference um and and our minds like things like shadows actually helps our minds determined what mark is the size of things and what is the the the locations of things so the next thing we're going to do is uh talk about uh lighting again shading um and let's start with the easiest thing is the floor okay so we want to have a single light of light source that comes from the top so if we look at the floor so we want the center of the floor to be bright brighter and as far as we go it's going to be darker so let's go back to the floor and we're going to add actually going to drop it here we have a repeating conic gradient and right above it we're going to add another gradient because we're working with shadows so everything is very gradient we're going to work with a lot of gradients so let's do uh oops radial gradient and we want the the center to be transparent because we want to be as bright as can let's do a transparent center and as far as we go let's do a black uh up left comma here and oh it's not going to work because the background size needs to be 100 comma yeah okay so yeah yeah but actually now because the uh the radial grid takes the the distance from the center to the to the corner not to the side uh let's let's do it a bit like 75 so it would yeah it would look more round okay so this is the floor now let's look at the box um there is a trick i've started doing lately i sometimes i do animations with a lot of uh with a lot of divs a lot of elements and i can't do it in those and in those animations because it's getting heavy but here we don't have a lot of elements so it's okay and what we're going to do we're going to add for each child of the box for each side of the box we're actually going to use a box shadow uh uh let's do like a zero zero uh m i don't know and uh let's do it back for now and we're going to give it a inset and yeah it already looks better that's crazy the difference that makes yeah actually it's a bit darker let's let's give it a bit more lighter yeah now it looks good and give the same thing to the top so the box already looks much better uh and now let's talk about the bottom because we have the bottom but we didn't actually use it so now let's put uh the bottom in use uh just so we can see it let's do the background of white for now and uh yeah but it needs to be um bottom because it needs to be in the bottom bottom zero and the translate needs to be positive yeah so now we have the bottom but oh i forgot yep sorry uh yeah we have the bottom in the bottom but let's yeah let's give it a a dark like something like that like black with opacity and the box shadow it doesn't need to be inset it needs to be outfit so now we have like a scene the the the where the place where the box touches the floor there's like a little shadow comes out of it oh that's clever yeah so like if i'm if i'm turning it uh off so you can see it's off it's very gentle but it's that that's exactly what i said it's those small things that actually makes the difference uh like the ball it's not just the shading of the ball it's the casting of the shadow that it does on the top of the box um so let's let's actually go to the ball now okay you take it let's do uh uh what we go what we want to do because this the the light is directly from the top we want to do a background image of uh again a radial gradient uh and we want it to be like a circle at the top because it really won't i want to start at uh at the top uh well yeah so it's you do like really circle at top okay and the the very top needs to be very bright so let's do it uh white or again it could be a light blue if you want oh sure and the bottom actually needs to be very very dark so let's do it uh black it can be a dark blue but let's do it black for now and it should up wait this needs to be a comma uh yeah okay that's crazy so now we have a lighting oh and by the way i i i do want to to talk about something just for now i'm going to do it in one line just so we could see it uh actually those two uh two colors actually have a midpoint in the middle and you can actually control it a lot of people don't know it but it actually has like a 50 uh a midpoint a hint in the middle and you can change it you can change it like for example do it like 30 and then you have more shadows and if you change it for like 70 then you have like more lighting so i actually sometimes use it i don't i don't change the position of the color just the the position of the the midpoint between them uh when you're doing gradients with working with a lot of gradients you really should know and how to work with it um yeah so the last thing that we need to do is uh as i said doing the the shadow of the ball on the on the box uh and the mistake a lot of people do is that they uh they put it like like it's a pseudo class or or a sub element of the ball itself but it it you shouldn't it shouldn't be of the object that that cast the shadow it should be relative to the object that the shadow is casting on so it should be relative to the top okay so i can actually use it with pseudo class maybe if it would be my animation it probably do would use a pseudo class but for now for readability we're going to add a an element here let's call it a ball shadow uh if you agree with me i can do it with the pseudonym i'm a big fan of pseudo class or sweet elements so yeah but again this is uh we wanted people to learn so this is just for reality i think more clear yeah so let's put the ball shadow right here between the ball and the cube and again the position the ball shall need to be a position absolute relative to the uh to the top uh it needs to have the same uh width and the height of the of the top height 100 and again just so we can see it uh let's you can see it why but we don't want to use it we do want to to have uh oops sorry uh background image of again radio radial gradient uh but here it seems to be the other way around the exactly the other way around so the center is going to be real dark and the farther you go would be uh lighter um let's get rid of the background color uh yeah so now you can see it but it actually needs to be uh smaller because the ball is hitting the the uh the cube so it needs to be smaller and it actually needs to be lighter so let's do like seven you're the first this is the first time i see using the hex for the alpha values and it's the first time i see value like how quickly you're just able to make the changes on there just when you're using it only on black it's actually pretty intuitive yeah well yeah we use onion black intuitive but i'm actually so used to uh working on hex i'm i'm trying to getting used to the new syntax it's so hard i'm trying like at work and i'm trying to do it to work with the new syntax but it's hard i'm so used to working with axes i'm working with axes for decades yeah um yeah so this is all the shading i think all the shading i wanted to do uh and the next last thing that we want to do is start animating things um yeah we're gonna yeah i'm excited yeah definitely it looks awesome right now i think i mean just just to interrupt i guess before we jump into it i just want to say like right away um just adding the shadows on there for me is like and then just using the inside shadow like for me i never would have thought of doing that and now that i see it it's like oh yeah why wouldn't that works perfectly and then also just like adding that little shadow on the bottom thing like it makes so much sense to do something like that but yeah really cool it's it's amazing the difference that those shadows make on there or they will the fake if if you take if you take like a snapshot of the same image before and after the the shadowing part it's it's a really different image and it doesn't make all the difference so let's start with animation and we want to animate us a few things uh first of all when i do 3d scenes uh i a lot of the times i would like i love to have the uh the camera like rotating 360 degrees around the scene i i don't really rotate the camera because i can't i just rotate this scene uh in front of the camera so when i do this 3d scene it really gives the the the feeling of oh there's there's uh width and height to things and and depth and just really feel like a real 3d render uh so that's the first animation we're gonna do we edit right uh we'll add it to the scene oh i've just remembered something we we forgot to add a transform style to the box to the cube uh because it also has child uh if i wouldn't edit when we start rotating things it would look uh weird we could look at it later on uh so let's let the animation you add the animation sure uh here to this to the theme uh sorry i'm trying to find the right line 48. uh 19. oh 19 oops oh there we go animation awesome yeah okay so you're here okay um let's call it i don't know uh scene rotate or whatever you want to call animations whatever you the speed um let's because we're gonna need two variables we're gonna need the rotate speed we're gonna need the bounce speed so let's add a variable here um rotate speed and we'll do it uh infinite obviously and linear because the rotations to be linear okay so let's do uh keyframes and it's gonna be very really easy i'm just gonna do a two uh transform gonna rotate it on the y-axis uh 360 degrees now we can see that you can see what did i miss the rotate speed ah of course let's add a rotate speed let's do it let's do like 30 seconds so now we can see that it rotates that's so cool what yeah but look at them we can actually now see that the ball is not a ball just a thin shape a thin element so the trick to solve it it's very simple you take the animation of the scene itself okay and come to the bowl and we're gonna add the same animation to the ball but we're going to add a reverse to it and then what happens is that the c is rotating but the ball is rotating counter direction so our minds see the ball and we see oh okay we'll see the same shape from different directions and it's always circle it must be a ball okay that just makes me so happy thank you um okay so uh this is the the rotation now let's let's make the ball bounce and when we talk about bouncing we need to remember one thing uh the the the timing function of is different with different directions so when the ball goes up it the timing functions need to be ease out and when it goes down it needs to be is in now there's a few ways to solve it one of it is by using just ease out and alternate because when it alternates it alternates too easy but we can also animate the timing function and i actually didn't know it until not too long ago so we got it with animating uh the the timing function okay that's cool i've never heard of that before that sounds cool yeah that's why i thought about it i thought maybe i will even teach you something okay so let's go to the uh to the ball right here oh we already have the animation here so we'll add another derivation let's call it a ball the speed uh did i add the mount speed oh no so let's add a bound speed of let's let's say two seconds i know um bounce speed and again it needs to be infinite and um let's start with ease out i'm gonna we're gonna animate it back to easing later um oops sorry and have let's do the keyframes oops no it needs to be a comment yeah okay uh and let's add the keyframes key frames okay um so the the the initial and the end point the zero percent and the 100 percent okay i'm going to animate the bottom as i said okay so the initial uh the zero percent and 100 percent should be uh 1 em but the 50 needs to be uh way higher so let's say for example uh 3 am okay and now we have the ball bouncing now but you can see the direction on the way down as i said it is out and it should be is in so we can just edit right here inside the the the keyframe we'll add animation timing function is in and now the ball is bounce wow okay this actually needs to be a bit faster maybe i think uh oops one point five for something like that where you're changing the timing function in the animation is it just like that's not like it's literally going to get when it gets to the 50 it sort of like switches from one to the other one and then so that's why it's working one direction then working the other way yeah so because what we're seeing is that between 0 and 50 we get the the the same ease out and yeah it's just it's moving uh back to using uh because it it doesn't it doesn't uh it's like it's not custom variables it doesn't uh uh transfers uh uh translate between them but it does move the the values yeah um okay so let's let's talk about the shadow because the ball moves but the shadow doesn't move and if you think of what would happen in the real world so the shadow will become bigger and a bit less opaque right so let's let's animate the ball shadow it actually needs to be very similar to the to the ball bounce i think uh it needs to let's call it a ball shadow uh it needs to be the same yeah it seems to be the same thing we actually need to use the same uh the same trick let's call it of the of the timing function right yeah ups that needs to be like this okay and yeah okay thank you uh we're both doing it there we go yeah but but obviously we don't need to to move the bottom what we need to do is to have the transform uh scale uh let's here the initial would be one obviously and when it ups when it's up let's say two so now we can see the shadow becomes bigger let's let's actually uh we can see it from the top a bit higher let's change it to 2.5 and let's get back to the heat to the animation we also need to add an opacity uh again we'll start with one and here we're gonna do like um i don't know 0.5 uh yeah so now the shadow acts like a real shadow and again those little differences really make a big difference that's that's awesome uh so the last thing i want to do uh because i said we're gonna animate the box i really like to uh to imitate collision uh if you see i did like domino's animation and things because animating real collision we don't have any collision engine obviously with css so uh i want to animate so when the ball hits the the cubes of the cube goes like black white um okay so so the last animation uh i think yeah so first thing first let's let's correct the ball so i want the ball when it starts it actually needs to start a bit lower now so instead of here instead of 1am let's do like um 0.5 in okay so now we can see that the ball will start uh yeah it's like sinking in yeah yeah so let's add let's copy this and go to the cube i'm gonna add the animation we call it let's call it cube uh yeah no don't don't worry about cube height okay uh here because the movement is gonna be real fast so the timing function doesn't really matter but let's do it linear so just so it would be easier and again the same idea uh we actually don't need this anymore um so the cube height what happened here oh that's it looks weird yeah yeah okay uh i need to change yeah i said i need to change the height so the initial height zero point at zero and 100 degrees 100 needs to be 1.5 right because that's the bottom um [Music] right no that's not good oh that because the box is actually moved to the top it needs to be on the bottom so not the top it needs to be bottom minus one so yeah yeah okay yeah and in fifty percent but it's not really fifty percent it needs to be in the full size uh two em but so now the the box is moving but it's not moving like i want it to move because it's not 50 it's actually need to be like a range uh something like i don't know something between 20 and 80 it's not uh eighty percent uh so so most of the time between twenty and eighty percent it's gonna be in the top and just when the ball comes in it's gonna move but it's not the exact numbers and you we will need to do some fine-tuning and uh uh trial and error to get the exact number but let's do the bounce speed a bit slower for now and we actually need to get just one number because the other number is just the exact opposite of it so let's try uh ninety percent it's uh it's not quite there uh ninety-five percent would be i think a bit too much uh we can see if it's too much we can actually see the ball going in the box so yeah so you can see it so let's 93 probably be okay and uh this is the exact fine tuning that can take animation anywhere between an hour and three days yeah yeah it's it's almost there let's do 95 and 93.5 and it's going to be okay and so the the other side is going to be 100 minus 93.5 so it's 6.5 um so yeah now we you can actually see that when the ball comes to the uh yeah to the box it really looks like it there's contact between the box and the release actually we can have a bit slower release like the box is coming back to place so maybe not 6.5 maybe like eight and let's move the speed back to 1.5 so now it looks oh well yeah yeah so if we're being picky just one last thing uh the the shadow because the shadow now needs to be on the full size uh right a bit sooner right so it's not just a zero degree no this is a this is it's not just uh zero percent it's also uh uh eight percent uh eight percent and nineteen three point five yeah yeah i'm a bit nitpicky in these things but now it looks much better um yeah so that took a while but now we have a 3d render of a scene and i i thought about this shape by the way because i think it uh there's a lot of things a lot of elements that i work on in a lot of my animation that they do bring it together like there's a box and a ball and moving and everything uh and i actually pretty happy with the results so what do you say yeah i'm blown away by it i think it's just the like whenever i'd see things like this it just would i have no idea where to even start and there's obviously a lot of work that does go into it and you're making it look easy just because obviously you know you know your experience with it makes it easier to know where to start with a lot of it like even just making the cube or something but it's not that complex there's the fine tuning especially the animations i think that would take me forever to figure out how to you know get the right numbers on that yeah there's a lot of trial and error trust me yeah but just like the simplicity of like the gradient on the ball itself or the like that for me and just doing the reverse animation on that like it's not complex but the effect of it is just amazing and so cool so it's i think something i i definitely want to play with more and just but yeah i'm blown away even looking at it now like it's just it's i'm impressed by it and i sort of took a little bit like i understand more how it's actually working but it doesn't make it any less impressive i think it's so cool thank you but now now you can know now you know where to start now if you wanted to do something you can actually start and do it i'm actually exciting to see work uh uh with 3d animation because i see your channel you know for years you know you know me and but but i always wanted i wanted you to do things with 3d animations you almost never did it yeah uh very very rarely uh so maybe now we can see more i'm gonna i'm i will be happy to see it yeah definitely i'll try and i'll try and squeeze some different things and i need to find some ways to challenge myself to make sure i don't forget everything we discovered so i'll be diving in great and yeah just thank you so much for your time and and coming on here to help you thank you for having me um for anybody who is following that wants to know where they can find more of your stuff what's the best places they can go to to follow what you're doing uh well the best place is twitter at amichin uh i think you you would put a link down there yeah there'll be a link in the description definitely follow like i'm just every time he tweets one of his new things i'm in amazement so definitely worth the follow thank you uh yeah i work uh original content a lot of animations a lot of css not only is it mainly css uh i explore a lot of a lot of uh things a lot of content inside css and so the best places is twitter or codepen if you want to just see the the work itself um yeah that's it awesome so yeah there's links to everything down in the description below thank you guys all so much for watching and until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 153,852

Rating: 4.9858298 out of 5

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, 3d css, css perspective, css animation, css rotation, css cube, css bounce, css boucning ball, css bouncing animation, css realistic 3d, css 3d effect, css 3d animation

Id: NdftnCDwKaU

Length: 44min 56sec (2696 seconds)

Published: Tue May 11 2021