CSS transform basics - CSS Tutorial

- [Instructor] Transforms, transitions, and animations are all things that CSS can do, but their names are so similar they can sometimes be confusing. All three terms sound like they could possibly make things move, but not all three of them do. The focus of this course is on CSS keyframe animation. But since all three of these are frequently used together in web animation, we'll cover transforms and transitions briefly as well. Let's dive into transforms first. I like to think of these as the yoga of CSS. We can use them to bend and twist those flat rectangular HTML objects into all sorts of configurations. I'll use this robot image here to demonstrate some of the things that transforms can do. Transforms are often used to translate or move an object around the browser window, so we'll start with that. For example, in our CSS, we can apply a transform of a translation to our robot to move it slightly across the screen. So we'll add a transform of a translation on the x-axis and we'll move this image 300 pixels to the right on the x-axis. The x-axis is the horizontal one. So when we save this and go back to refresh our browser, we'll see that our robot image has moved 300 pixels to the right. Translations can take other units as well, like amps and percentages, for example. But know that for transforms, the percentage refers to the object itself, not as container. So if we go back to our CSS and change that 300 pixels to 100%, when we save and refresh our page once more, we'll see that our robot has moved to the right the equivalent distance of its own width, which happens to be slightly less than 300 pixels in this particular case. We can also translate on both the x and y-axes by using the translate function and giving it two coordinates. So for example, we can change this translate x to just translate and then give it two numbers: the first one for the translation on the x-axis and the second for the translation on the y-axis. So we can say 100 pixels on the x-axis and perhaps 200 pixels on the y-axis. So when we save that and refresh our robot once more, the image has moved slightly over 100 pixels to the right and down 200 pixels. Transforms can also scale and rotate objects in addition to translating them. We can also perform those on both the x and y-axis at the same time or separately. So let's add some rotation and scale to our robot and see what happens. I'll add a scale of two after our translation and then a rotation of 45 degrees. So that will make our robot double in size, the scale of two, and rotate it 45 degrees. If we save that and refresh our page once more, we'll see that our translation stayed in place and our robot is now twice its size and rotated 45 degrees. Notice how each time we refresh our page, our robot shows up in a slightly different position and scale and rotation, but we never see any movement or anything like that. Transforms will change how our object appears, but they won't create animation. Transforms have a stacking order, which means the order you apply each transformation in will affect the overall look. Each additional transformation is compounded on top of the ones that have come before it in the list. So if we go back to our CSS and change the order of these transformed functions, we'll see a slightly different result. So for example, I can take this rotation and move it to the beginning of our transform list. And then maybe I'll also take the scale and move it before the translation as well. And now when we save that and refresh our page, our robot is in a slightly different position because our transforms were applied in a different order. So that goes to show that it's important to remember when we're using the transform property like this, that the order of the transform functions will affect the end result. I should note that some browsers are starting to support independent transform properties behind an experimental flag. But at the time of recording, this isn't yet widely supported so we'll be using the single transform property like we just saw in this example. So that's a quick look into transforms and how you can use them to change the appearance of elements on your page.