Working with the transform property - CSS Tutorial

- The transform property lets you modify an element in a few different ways without affecting the rest of the lab. So you use the transform keyword and then you apply a number of different properties. The default value is of course no transformation, but there's lots of other ones, and you can apply for example, scaling, which means changing the size of the item by using this scale value. You can also rotate an element or also skew an element, which means tilting it. Now translate means moving an object a certain distance, and you can use a single value for these transformations. So for example, you can choose to just use the scale value like this, or you can use the scale X, Y, or Z properties instead and modify just in one of the dimensions. You can also separate them by space so you can apply more than one of them. In addition to that, you can use a perspective value. This allows you to control in three dimensions how far away the object is from the user. There's even a matrix option that lets you create complex mathematical transformations using a set of four numbers. There's a couple of notes here. You can define multiple transformations by separating them with spaces and you should also use the appropriate measurements, so for some transformations like translate a pixel amount of how far to move something makes sense, but you can also use percentages. However, on rotation, you're probably going to want to use their degrees. There's a few other properties, the transform origin property lets you define how far away an element displays from the view, and this gives 3D objects a little bit more depth. Now perspective-origin lets you define where the user is Looking at the 3D-positioned element from. Transform-style lets you determine if the child elements that have been 3D transformed, retain those 3D transformations. Since you can rotate an object in three dimensions, backface-visibility lets you control if you can see the backside of a 3D rotation, but these are a little difficult to visualize, so thankfully there is a fantastic website that helps you visualize all of these different transformations and you can find it at this URL. So when you get here, you'll see this introductory animation and after it's all done, this navigation on the side gets docked, so you can pull that out by clicking on this button and here you can see all of the different properties. There's a few that you can access by scrolling with some additional controls. Now there's also the CSS output section that lets you take a look at the code that you're writing. And so we can do here is play around with the different properties so we can do a 2D rotation and you can see that the transform property is being added a rotation option right here with the appropriate number of degrees. And then you can also rotate in 3D by modifying these items right here. So the x-axis is this axis right here, y-axis is right here and then the z-axis you can't really see it but it's sort of coming towards you and away from you from the center. So you can see that if I rotate the z-axis is essentially the equivalent of rotating in 2D. And then if I apply some of these other rotations, you can see where things make a little bit more sense and you can see the depth of the elements as I switch them around. Again over here you can see how that affects the element that you are attempting to rotate. So perspective you can see that it controls the sort of view of the user, and then transforming allows you to move an element in the three different axis as well. And then scaling lets you change the size of the elements. And you can see all the other properties right here. There's also a reset button so you can get back to what the original looked like here, as well as this randomized button which just makes it go crazy. But sometimes it's sort of cool to see just all these different properties being affected and maybe you can find something you like here and then play around with modifying those. I don't think I like any of those, so I'll just reset this back. And again you can copy this code right here if you want to apply the same transformation to your objects.