Seeing the matrix()

Published 13 years, 8 months past

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.

This tool grew out of the first Retreats 4 Geeks (which was AWESOME) just outside of Gatlinburg, TN.  After some side conversations betwen me and Aaron during the CSS training program, we hacked this together in a few hours on Saturday night.  Hey, who knows how to party?  Aaron of course wrote the JavaScript.  Early on we came up with the punny name, and of course once we did that the visual design was pretty well chosen for us.  A free TTF webfont (for the page title), a few background images, and a whole bunch of RGBa colors later we had arrived.  Creating the visual appearance was a lot of fun, I have to say.  CSS geeks, please feel free to view source and enjoy.  No need to say “whoa” — it’s actually not that complicated.

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.

Comments (13)

  1. I had a hell of a lot of fun building it with you, Eric. And thank you again for helping make the first Retreats 4 Geeks so amazing.

  2. Love the tool, hate the animated background. Is there some way to stop the animation?

  3. Aaron, I had a great time as well. We ought to figure out a way to do that kind of thing more often. And here I mean both building the tool and doing the retreat.

    Jared, pretty much the only option is “don’t use a WebKit browser to view it”. Unless of course there’s a buried preference in Safari and/or Chrome for suppressing CSS animations that I don’t know about.

  4. Sorry for the basic question but I was trying to understand the resizable textarea and couldn’t see the code that is making that possible? I did a brief search that mentioned JQuery but I didn’t see your source referencing that anywhere? Page looks great! I like the animation.

  5. @Tim, all webkit browsers (and now Firefox 4) provide the ability to resize textareas unless explicitly disabled.

  6. Love it.

    Sounds like the retreat was awesome. That’s my kind of retreat, hang out and do something geeky. :)

  7. Please correct me if I’m wrong, but couldn’t this be accomplished by doing getComputedStyle on an element, which returns the matrix() instead of the discreet commands?

  8. That’s pretty much how the tool works, Brian. Of course, getting that matrix value is only part of its utility…

  9. If I click the blue pill it clears the boxes. But then when I then click the red pill it just shows “matrix(0)” in the bottom box. Shouldn’t there be a way to reset it? (Refreshing the page doesn’t do this either.)

  10. Nice demo Eric and Aaron.

    You wouldn’t believe what I have been creating offline and then I see this demo.

    My method for digital rain is slightly different but one major drawback, it does not repeat but the bonus is that it does not need to load images totaling over 400kb. Would you like me to share? It will make your demo’s background sharper and possibly less jerkier.

  11. @Chris, once you take the blue pill, the story ends……

    I can refresh the page and get the demo to reset.

  12. @Chris. Refreshing resets it in Safari but not FF4. For FF4, you need to close the tab and open a new tab.

  13. Pingback ::

    Eric’s Archived Thoughts: Seeing the matrix() | Dougal Campbell's geek ramblings

    […] GravatarsFancyBox GalleryHeadMetaText Filter SuiteTheme PreviewWriteScrollContactDonateLibrary Eric's Archived Thoughts: Seeing the matrix() 4 hrs 7 secs ago # Leave a comment About Dougal Dougal is a web developer, and a "Developer […]

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview