Learn CSS Transform In 15 Minutes

are you looking to make amazing css animations maybe just center an object or maybe you just want to understand what the heck transform does if so this is the perfect video for you because i'm going to be covering every single aspect of the transform property in css so you're going to know exactly what's going on [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now transforms are going to be most commonly used inside of animations and that's because the transform property is incredibly performant to animate and allows you to do tons of things from moving an element to scaling it to making it rotate and other things on top of that so if you're interested in using this in the form of animations i highly recommend checking out my full animation crash course after you're done watching this video to really learn how you can also start writing cool animations but in this video we're specifically going to stick to just the transform property because on its own it's really complex and a lot to understand now to get started i have a really basic div with a bunch of just default styles we're going to kind of ignore this for now it just gives a div with a box on our screen we can play with and then we're going to write all of our transform styles inside this other div selector here and to do a transform you just type out the word transform just like that and now inside of here you can actually specify a bunch of different functions which do different things and the first function i want to talk about is probably the easiest to understand and that is going to be the rotate function as you can see there are essentially five different variants of rotate there's just plane rotate there's rotate 3d then there's the x y and z variation of this this is something that you're going to see really common with a lot of different transform functions is they're going to have a 2d version they're going to have a 3d version then they're going to have an x y and z version for specifically dealing with those one little axis at a time generally you're going to only work with the 2d version but sometimes you may want to work with the 3d version or just one axis at a time our case with rotate it's just easiest to work with the two-dimensional version of just the rotate function and in here all you do is you pass in a value of degrees or turns or whatever you want so we could say we're going to rotate this by 74 degrees and now if we click save you can see the box has been rotated 74 degrees it's at an angle now the text is sideways and so on you know we could do 90 degrees to get it perfectly you know rotated by one quarter or you can use something called turns we could say 0.75 turn and that's going to rotate by 90 degrees or a quarter turn if we save you can see the box is in the same position you can use turns or you can use degrees whichever one is easiest for you to understand now if you wanted to dive into a 3d rotation you could use the rotate 3d function like this this function is actually quite confusing and difficult to use so i recommend instead just specifying for example rotate x or rotate y or rotate z individually and that would be how you rotate in three dimensions so we could rotate by 0.25 turn and if we save you can see it looks like the box disappeared and that's because we've rotated in the x direction and the box is essentially paper thin against the screen so if we rotate by for example like .03 turn and we save or make it a little bit larger we'll do 0.13 and save you can see the box looks like it's getting shorter and that's because it's rotating away from us so the top is getting further away from us and the bottom of the box is getting closer as we get closer to that 0.25 you can see the box is getting more and more squished because it's rotating away from us same thing with y we can change the y rotation here we'll start with 0.13 and you can see it looks like the box is getting skinnier if we go to 0.23 it's again getting skinnier and that's because it's getting further away from us on one side so the left side is getting further away from us while the right side is getting closer to us or the other way around depending on which way you're rotating the box finally we have rotate z and rotate z works exactly the same as just rotate so both of those are the same you don't have to worry about one or the other rotate x and y are the ones that get kind of confusing because that's when you're rotating into the screen or away from the screen generally i don't ever use these though i pretty much just use rotate on its own just like this to rotate a box on the screen because that's 99 percent of your use cases if you're doing some fancy 3d thing then sure you can do rotate x or rotate y as needed the next transform function i want to talk about is another pretty easy one to understand and that is the idea of scale scale is just going to allow you to make an object larger or smaller and again we have default scale scale 3d x y and z so the default scale if we pass in one single number to it like 1.5 what's going to happen is it's going to make it 1.5 times bigger in the x and the y direction at the same time so if you pass it one value it does both x and y if you pass at two values though the first value is going to be x the second value is going to be y so in this case our y is two times bigger than normal and our x is 1.5 times bigger than normal or you could make the y 0.5 so now our y is half the size it normally is but our x dimension is 1.5 times the size it normally is we can specify x and y both at the same time by using scale or we can use for example scale x we can say we want to scale the x direction by 0.5 or we can do scale y scale the y direction by 0.5 and again we can do scale z for three-dimensional stuff but our box right now is not three-dimensional so we don't really have to worry about that and again that's only useful if you're doing some crazy three-dimensional scaling which for 99 of the use cases you're probably not the most part what you just want to do is just scale 0.5 there our box is half the size it normally is or we can do scale 2 and now it's twice the size it normally is now those are probably the two easiest to understand functions for transform but by far the most useful is going to be the translate function and translate allows you to move an object whether left right up down or back and forth in the z direction so you have again translate translate 3d x y and z so by default we're going to start with translate let's just say that we're going to translate by 20 pixels or 30 pixels we click save and you'll notice the box moved to the right by 30 pixels without this translate it's right in the middle and with it you can see it's been moved to the right by 30 pixels the translate if you pass it one value is the exact same as if you did translate x because it's translating in the x direction 30 pixels to the right if we did negative 30 pixels it's going to translate 30 pixels to the left so this is without translate and this is with translate it's moved 30 pixels to the left so we can use positive or negative numbers to move our objects based on a set number of pixels the y direction is the same thing but it's going to be for the y axis so we move 30 pixels up or if we do a positive number it's going to move the box down by those 30 pixels now if we go back to using the translate function we can actually pass this two separate parameters so we can do 30 pixels we could do like negative 40 pixels what this is going to do is move our box to the right 30 pixels in the x direction and it's going to move us up 40 pixels in the y direction the first value you pass is going to be the x direction the second value you pass is going to be the y direction for the translate function finally we have translate z again but this isn't really going to make much difference i could put a large number in here and if i remove it and save you're going to notice it doesn't look any different and that's again because we're not dealing with three dimensions here we just have a two dimensional object so moving it back and forth in the z direction isn't going to make much difference now this may not seem that useful but the place where translate becomes really powerful is when you start to use percentages so let's say that we want to translate by 100 what do you think is going to happen well what happens is it moves the box over by 100 of its own width if we remove this you'll notice the right edge of the box is right here where my mouse is and if i come and put this back you see the box has moved all the way over 100 of its width and this is perfect if you want to do centering so let's say that we just have our div here and we want to add an after element which has some content that just says after and we'll say background is red let's just save we'll get rid of this transform here for now and you can see we have that after content well what i want to do with this after content is i want to center it at the very top of our box we can say that the position is going to be absolute just like that and here our position is going to be relative now you can see it's centered in the very center of our box we want to make it centered at the very top so we can say our top is going to be zero and to get it centered we can just say left is going to be 50 percent that's going to put the left edge of our box right here in the very center we want the center of after to be in the dead center now what we need to do is just say transform translate and we want to translate negative 50 percent in the x direction that's going to move us half of our width over to the left which as you can see perfectly centers this after text at the very top of our box so by using position absolute in combination with left and transform translate negative 50 we can very easily center things based on their own width this is something that's really hard to do in css without this so it's perfect that you have these properties available to use this and this is where 99 of my translate use cases come in when i need to just perfectly center something translating by a percentage is the ideal and perfect way to do that now the next property that i want to talk about for transform is probably the least useful of them and it's called skew but then we're going to dive into right after this how you can use multiple transforms together really easily and some tips and tricks that you really want to know so just make sure you stick through this property even though it's not quite as useful so with skew essentially what you're going to be doing is stretching out a shape and again with skew we have all the different variants so we have x and y but there is no three-dimensional skew to worry about the first key let's just say that we want to skew by 90 degrees and if we save and make this actually something more like 30 degrees you can see that our box has kind of been stretched and tilted by about 30 degrees off to the side and that's why we have this kind of weird shape showing up for our box and this first skew number that you pass is going to be the x direction that'd be the same thing as if we did skew x they both look exactly the same now skew y is going to be essentially the same thing but we're skewing in the y direction now instead of the x direction if you pass two properties to skew the first one is the x and the second one is the y so we'll do 30 and we'll say 40 degrees here for the y and let's just make it negative actually now you can see we've skewed our box in x and y direction by 30 degrees and 40 degrees negative respectively now unlike all the other transform properties i don't really have very many use cases for skew but when you need it it's the perfect one for that scenario the next thing i want to talk about is combining together multiple transforms because as you can see we've done certain things you know like rotate you know 30 degrees or whatever we haven't combined multiple properties together and the way you do that inside of css is just put them all on the same transform so we'll say rotate 30 degrees and we'll say scale of 0.75 so now we have a rotated and scaled box that is using these two different properties we can combine together as many of these as we want for example you know i could say scale x by 7.75 i could say translate y by negative 10 pixels save and now our box has been scaled it's been moved it's been rotated and all these other things now where the difficulty comes is when you want to override a transform because a transform is one property if you overwrite it you need to redefine everything inside that property you can't just override one part of it you have to override all of it or none of it so let's say by default we're going to have a box that's going to have a scale of 1.2 and it's going to be translated in the x direction by 5 pixels let's just actually make it 50 pixels so by default this is what our box is going to look like and then let's just say that we're going to have a class called dot big and dot big is going to make our scale larger so our scale is going to be 2. now you may think that's all we need to do and if we come in here and we say class of big you're going to notice something interesting it did scale but our box is no longer translated by 50 pixels anymore we need to make sure we write that translate x of 50 pixels back into here to make sure our box is translated and scaled correctly same thing if we have a class called move that's just going to move our box what we can do is we can say that the translate's going to swap here so for our transform transform we want to make sure that we do is have our translate the x direction be negative 50 pixels this time and if we change our class here from big to move you're going to notice our box is moved the correct direction but it now lost that scaling of 1.2 we need to make sure we put that scale of 1.2 back into there and then finally what if we combined together.big and dot move well if we come down here and we try that out you're going to notice our box only has the classes for dot move it doesn't have any of our dot big we need to come in here we need to make sure that our transform has the scale of 2 and it has the proper translate x of negative 50 pixels and now it's going to have all the different properties we need but you'll notice this is a real pain to work with we've repeated this scale 1.2 and this translates negative 50 pixels all over the place and if we have like three or four different properties we can define the amount of different css classes we need to find is going to become astronomical so doing your code this way is really painful but it used to be the only way to do this until we got css variables css variables make this incredibly easy to work with though so if you're unfamiliar with css variables i recommend checking out my video on them linked in the cards and description first and then dive into this what we want to do is take our scale here and we want to use a css variable for our scale we'll just call it scale and by default we're going to set this to 1.2 if it's not defined same thing with translate x we want to use a variable which we're just going to call translate x and by default we're going to use that 50 pixel value if we don't define it so now if we get rid of the big and the move class you're going to notice our box looks exactly like it did before it's in the right place with the right scale but down here where we have our big class instead of redefining our transform we're just going to redefine this scale variable and set it to 2 and we're not even going to touch the transform and that allows us to change just the scale it's going to get inserted into the variable here without messing with anything else now if i put my big class on there you're going to notice it still is in the correct position and it got twice as big now for move again we're just going to change that translate x property we're going to change it to negative 50 pixels and now if i put the class of move on here you're going to notice it moved off to the left but the scaling is still there now for big and move we don't even need that we can completely get rid of it and that's because big and move already take care of the scale in the translate x if i put the big class on here as well we now have a big box that's also moved in the correct location and as you can see our css is really easy to read really easy to write and if we need to add something else for example we needed to add a skew into here we could just say that our skew is going to be you know like 50 degrees and then up here we would just add in our skew with a variable for that skew and let's just default it to 10 degrees for example and now we also have this property for sku that's going to work exactly like we wanted to if we come in here and add the sku class you can see it is a much more skewed box and big and moved all at the same time now if you enjoyed this video i highly recommend you check out my full css course which has an entire section dedicated specifically to animations so you can really master this tricky section of css if you're interested i'll link that down in the description below for you also with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 39,123

Keywords: webdevsimplified, css transform, css transition, css animation, css transform tutorial, css transform translate, css transform transition, css transform 3d, css animation tutorial

Id: rzD-cPhq02E

Length: 14min 37sec (877 seconds)

Published: Tue Jul 27 2021