After completing yesterday’s post I started digging into combining multiple CSS transforms for individual elements. I was inspired to do this because I realized that if multiple transforms were applied to an element then the string returned by referencing element.style.transform might contain specifications for multiple transforms. If that is the case then I’d have to parse the whole string to find any particular transform (e.g., if I was looking for a scale(X,Y) spec) rather than assume it was the only one supplied and therefore started at the beginning of the string.
Alas, things got complicated. It turns out that you can specify multiple transforms using CSS directly by including all the transforms on a single line in quotes like this:
|
1 2 3 |
#handle003 { transform: scale(0.5,0.5) rotate(45deg); } |
What you cannot do, however, is specify multiple transformations in an equivalent way in JavaScript. It would work like this in theory:
|
1 |
handle003.style.transform = "scale(0.5,0.5) rotate(45deg)"; |
…but the assignment doesn’t have the expected effect. I could apply the scale and rotate transforms independently in this way but if I try to assign both then only the scale transform is applied. And, that is true no matter which transform is listed first. You can still use animations to modify a transform set in this way (since only one is applied) but if you apply both using CSS and then try to use the techniques I’ve been describing then the mechanism will choke and what gets displayed will be unpredictable. I haven’t tested every combination but when I set scale and rotation using CSS and tried to animate the scale, the element simply disappeared. Goodness knows what happened to it!
If you want to apply multiple transforms and use the techniques I’ve been describing then in theory they could be applied in combination by setting the elements of the transform matrix directly. If you dereference and break apart the six matrix values (the specific example is for Chrome but the same technique applies in general) that actually describe the concatenated matrices that apply the specified combination of transforms you could do some things to back out the ones that must be applied. (Documentation of getComputedStyle function here) If only a single transform is applied then figuring out what’s going on would be pretty straightforward but things get very tricky if there are combinations of skew, scale, and rotate transforms. You can make some inferences about the likely drivers but it would be messy (and I’m not going into that in this post, though I can take a look if anyone asks).
So, we can either get crazy and try to support entirely arbitrary combinations of transforms using the style property, or we can say that our techniques work if we use only a single type of transform at a time (for any given element). Since the point of my explorations here is my own learning rather than creating a finished product (Greensock’s licensing terms are so mellow that you’d be almost foolish not to use their stuff to begin with; I embarked on this exercise because I wanted the animations on my site to use my own code) I’m inclined to keep things simple.
If I’m not going to go all the way down the multiple CSS transforms rabbit hole there are still a few more things to explore in this project, and those will be the subject of next week’s explorations.