I’d like to propose a change to the CSS3 transform property syntax, which currently requires that we smash all transform effects into one property, like so:

transform: scale(.75) rotateZ(30deg) translateX(150px);

Somebody somewhere had a really good reason for doing it this way. I can’t surmise what it might have been. As these properties are making more regular appearances in my stylesheets, I am convinced that we should support a measure to break them out into separate properties:

scale: .75;
rotate-z: 30deg;
translate-x: 150px;

and perhaps their assumed shortcut properties (X Y Z):

rotate: 15deg 180deg 60deg;
translate: 150px 30px 300px;

The current syntax works great for static layouts. But the moment animation enters the picture, the weakness of this system becomes immediately apparent. Because they all override each other, animating multiple transforms at once becomes a tremendous chore, and makes many complex, more realistic animations impossible without dirty hackery. Let’s suppose you want to both scale and rotate an object, but with a slight delay on the rotation only. You’re stuck with weird hacks like this:

0%{
transform: scale(1) rotateZ(0);
}
25%{
transform: scale(.75) rotateZ(0);
}
100%{
transform: scale(0) rotate(90deg);
}

Not only is it overly verbose, but it puts on us the burden of complicated math and timing problems that CSS animations were meant to remove from the process in the first place. And don’t even think about applying any easing or bezier-curve timing functions to this, because it will all fall apart in short measure. You might be tempted to try defining multiple sets of keyframes and piling them all in different animations on one element, but they only argue with each other.

Gravity applies different forces on a falling object than the wind resistance which might cause it to rotate as it falls. So I need to be able to apply different timing functions to translate effects from the timing functions on the rotation.

The only alternative is to nest a bunch of elements inside each other to allow for independent control of the transform effects, which inevitably results in a bunch of un-semantic, presentational elements. I hate that.

Can we change this, please? It doesn’t strike me as something that would be technically difficult to implement. The algorithms are already there, the parsers just need a little tweak. This simple change will make a huge difference for the granularity of control we need for more natural and realistic animation.