From the course: CSS: Transforms and Transitions
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Combine transformations - CSS Tutorial
From the course: CSS: Transforms and Transitions
Combine transformations
- [Instructor] In our last video, we explored how to apply a single transformation to a page object using the CSS transform style. However, the transform style can be used with multiple transformation functions. As this demo shows, we can create a transformation that involves moving the object left and right using the translateX function, followed by a rotation of the object around its center, but order is important. Now, in this case, I've translated the object first and then rotated it. If I change the value of the translateX function, it moves left and right across the page. That's what we would expect. However, let's say I rotate it first and then apply the translation. Now, when I change the value of the translateX function, it moves left and right, but relative to the rotated position of the page object. A similar thing happens if I use translateY. Once again, this moves relative to the rotated position of the object. You have to keep that in mind when you're using multiple…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.