Setting CSS Properties

[00:00:00]
>> Sarah Drasner: We can also set different CSS properties so we can also set transform perspective, perspective in transform style. So I'm setting those properties on the elements before I'm animating them. So I could also do that in CSS, I could go grab all of those elements and write it in CSS.

[00:00:19]
Or I can have it right before my animation codes. So if I need to set transformOrigin for a bunch of units. If I need to have the transformStyle the preserve-3D. Because transformStyle preserve-3D isn't something that we're animating really. It's something that has to be on the unit itself before we start animating.

[00:00:38]
Now people ask me why I do this instead of writing it in my CSS? I do that for a couple of different reasons. One of them is, if I'm working on a big system with a bunch of other engineers and the CSS and JavaScript aren't right next to each other, well, people like to delete code.

[00:00:55]
They like to delete code a lot, so if they see a bunch of things like this, it doesn't actually affect the appearance of that element until it's moving. So they'll remove, they'll be like, what's this? They remove it, looks the same. And they'll be like, great, I can delete that code, that's definitely happened before.

[00:01:12]
So if it's next to each other, it's near each other in the animation code, it's a little more implicit that I'm saying, I'm about to use this here, don't remove that. The other thing is is that sometimes I wanna change these things as I'm working. Transform perspective and perspective actually change how that element is transforming in space, the perspective of that thing.

[00:01:38]
So I might wanna change it from 200 to 400 or something. Then it's very easy for me to do that all in one place.