See the Code - See it Full Page - See Details
*Uses Web Animations API... so demo is best in Firefox, Chrome, and Opera as of 8/2017* It can be difficult to understand what is happening with a transform, especially once you are using a handful of functions that are building on top of each other. It might be easier to grasp when you think about transforming the coordinate systems instead of your actual elements (which coincidentally is what is more appropriately happening). When you set a rule that says to `rotate(45deg)` you are not just rotating an element around 45deg, you are really rotating its whole coordinate system 45deg. This means that if you have a second function such as a translation after that rotation it will start from the new coordinate system. So `transform: rotate(45deg) translateY(10px)` will not cause the element to go down 10px vertically on your screen. It will instead use the rotated coordinate system and thus translate the element 10px down and to the left at a diagonal. Same goes for scaling. If you have `transform: scale(.5) translateY(10px)` you will scale to half its size and then translate down 5px on your screen (but in its new coordinate system that is half scale). The transform order is defined in the first variable in the JS. Add as many as you want, try different orders, and try repeating the same function after a change in the coordinate system. Also try specifying a different transform origin at the beginning of the CSS to see how that also affects the transform.
This Pen uses: HTML, CSS, JavaScript, and