Visualizing CSS3 Transformations

It’s pretty amazing what you can do with CSS3 transforms these days, but I often struggle with explaining the importance of function order when I am training people on how to use them. Transformation functions are a visual thing, so they require a visual tool to fully understand them and the implications of your function order decisions.

To address this need, I put together a tool that dissects CSS3 transforms so the transform process would be more clear for my students. I decided to throw it up on Codepen so you could learn from it as well. Why don’t you open that link and I’ll explain how it works. (Obviously, you’ll need to be in a browser that supports transforms for the tool to be useful to you.)

The tool starts you off with a simple three-function transform that includes both translate and rotate functions. If you hit the “Show Me” button, the browser will draw a box and step you through the application of the transform functions, one by one, animating their application so it’s easy to follow. This makes it pretty clear why an element ends up where it does.

Beside the “Show Me” button is the “Rearrange” button. It does exactly what you’d think: It rearranges the functions into a new, random order. If you press it and then press “Show Me” again, you can see if (and why) the element ends up in a different place. The original box remains ghosted out so you can see any differences.

Here’s a video of me playing around with the default transform stack:

Have a play and let me know your thoughts. I hope you find this tool as helpful as I (and my students) have.