Over the weekend, Aaron Gustafson and I created a tool for anyone who wants to resolve a series of CSS transforms into a
matrix() value representing the same end state. Behold: The Matrix Resolutions. (You knew that was coming, right?) It should work fine in various browsers, though due to the gratuitous use of keyframe animations on the
html element’s multiple background images it looks best in WebKit browsers.
The way it works is you input a series of transform functions, such as
translateX(22px) rotate(33deg) scale(1.13). The end-state and its
matrix() equivalent should update whenever you hit the space bar or the return key, or else explicitly elect to take the red pill. If you want to wipe out what you’ve input and go back to a state of blissful ignorance, take the blue pill.
There is one thing to note: the
matrix() value you get from the tool is equivalent to the end-state placement of all the transforms you input. That value most likely does not create an equivalent animation, particularly if you do any rotation. For example, animating
translateX(75px) rotate(1590deg) translateY(-75px) will not appear the same as animating
matrix(-0.866025, 0.5, -0.5, -0.866025, 112.5, 64.9519). The two values will get the element to the same destination, but via very different paths. If you’re just transforming, not animating, then that’s irrelevant. If you are, then you may want to stick to the transforms.
So anyway, there you go. If you want to see the
matrix(), remember: we can only show you the door. You’re the one that has to walk through it.