Hello, in this CSS Crash Course video, we're going to be looking at Transformations, we're going to show you how to rotate skew scale and translate a element. So the first thing that we're going to do is create a image element that's all going to be rotating. It's just gonna look a lot nicer than a div tag, for example. So image ID, is ID. Let me zoom in a bit so you can see what I'm doing better. Image ID equals rotation from the source.
I'm going to get an image from Google. I'm actually just going to type in sonar systems to the solar system website. And I'll get our logo so I'll get this over here. So right click, copy image address. Go back, paste it into Now I'm going to duplicate that. There is copy and paste that again, they're formatted.
Change the ID to skewing to gay Lin. And finally to run lation. If I saved up, go back, let's see what we've got. We've got four different images. So let's go to our index dot CSS, because this is where we're going to be coding it up. So the first code we're going to do is to affect every single image.
I'm going to put a margin of 100 pixels. We're going to put a width of 150 pixels, just to constrain it slightly. Okay, now I'm going to ignore the Wi Fi thing. That should be okay with that too. Really? Yeah, fine.
So What we're going to do now is do the hash rotation first. So hash rotation, transform. This is going to you per rotate. And for this, I'm simply going to put a degree value, some portunity 50 dg, which is 250 degrees. I go back refresh. As you can see, this has now rotated clockwise.
So I'm going to show you how to do the skew transformation. So hash viewing, transform, Transform, transform. You can even these few X and Y we can pray in 140 degrees 70 degrees. This is like getting the corners and just pulling it. So let's do that. Refresh.
Again, doesn't look the best but skewing doesn't always look like obviously like the normal image, but it depends on your website where you're going for. Now we're going to show you the scaling, transformation. So hash scaling, transform, scale. And I'm going to set a X and Y value to 0.5 comma 0.5. Save that. As you can see, it is two times longer, or two times wider, but only half of the height.
And you can also see the center it's scaled around the center, hence why it's not aligned to the bottom or to the top, but you could obviously change the alignment and the positioning yourself. Finally, I'm going to show you the translation method. So trans lation friends form translate. And what we're going to do is put 400 pixels and 200 pixels. So if we go back, this image will never move. It's moved down.
So you move 400 pixels to the right and 200 pixels down. So this is essentially 00. It goes that way in the x axis and that way in the y axis. So that's it for transformations in CSS. If you have any questions, feel free to post them on my education platform, sonar learning.co.uk. There'll be a link, add a resource to that.
Plus, there'll be a link to the GitHub page, which you can check out all the source code for from this video and every other video in this series. And as usual, thanks for watching. I hope you have a great day.