As you can verify by using the above radio buttons, the
blue F and the
red F have
the same initial and final transformations, namely:
- Initial transform: scaleX(25), scaling of factor 25 along the horizontal direction;
- Final transform: scale(13), uniform scaling of factor 13 in all directions;
Obviously, the
blue F animates as one would expect, with its scaling axes invariant and only the scaling factors varying; while the
red F goes through some erratic transformations.
The only difference between the
blue F and the
red F is the coordinate systems used to express their transformations. The
blue F is expressed in the default coordinate system up to a translation, while the
red F is expressed in a coordinate system rotated by 45°. That is achieved by using nested div's for the
red F, carrying the 45° rotations. In this coordinate system, the
red F's scaling of factor 25 along the native X axis is now expressed by this matrix:
However, geometrically, it is still exactly the same, as you can see by checking the radio buttons above.
The problem is that despite having the same parameters, and in particular the same initial and final transforms, the two animations look very different from each other. This is because the way that
the CSS Transforms spec mandates matrix interpolation to be performed is not coordinate-independent, i.e. isn't an interpolation of just the geometric transformations but rather an interpolation of quantities that depend on the coordinate system, which this example hopes to show isn't what we should want to be interpolating here.
An example of a coordinate-independent decomposition of linear transformations is the
polar decomposition. It has been used before to interpolate transformations in computer graphics, see e.g.
this article.
Let's finish by quoting Einstein on how making a similar mistake (assuming that a particular coordinate system was geometrically meaningful) cost him several years of work:
"Why were another seven years required for the construction of the general theory of relativity? The main reason lies in the fact that it is not so easy to free oneself from the idea that coordinates must have an immediate metrical meaning." ("Albert Einstein: Philosopher-Scientist", Paul A. Schilpp, 1949, p. 67)