Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Seeing the matrix()

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.

13 Responses»

    • #1
    • Comment
    • Tue 12 Apr 2011
    • 1045
    Aaron Gustafson wrote in to say...

    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
    • Comment
    • Tue 12 Apr 2011
    • 1139
    Jared wrote in to say...

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

    • #3
    • Comment
    • Tue 12 Apr 2011
    • 1150
    Eric Meyer wrote in to say...

    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
    • Comment
    • Tue 12 Apr 2011
    • 1207
    Tim wrote in to say...

    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
    • Comment
    • Tue 12 Apr 2011
    • 1228
    C Kihe wrote in to say...

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

    • #6
    • Comment
    • Tue 12 Apr 2011
    • 1430
    Nate Klaiber wrote in to say...

    Love it.

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

    • #7
    • Comment
    • Tue 12 Apr 2011
    • 1712
    Brian Blakely wrote in to say...

    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
    • Comment
    • Tue 12 Apr 2011
    • 1805
    Eric Meyer wrote in to say...

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

    • #9
    • Comment
    • Tue 12 Apr 2011
    • 1808
    Chris Hester wrote in to say...

    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
    • Comment
    • Thu 14 Apr 2011
    • 0325
    Alan Gresley wrote in to say...

    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
    • Comment
    • Thu 14 Apr 2011
    • 0328
    Alan Gresley wrote in to say...

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

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

    • #12
    • Comment
    • Thu 14 Apr 2011
    • 0333
    Alan Gresley wrote in to say...

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

    • #13
    • Pingback
    • Mon 9 May 2011
    • 0031
    Received from 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 […]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...

April 2011
March June