[css-transforms] New quaternion CSS transform option

Hello,

CSS3D transforms offer a lot of options to apply the desired transform, from Euler angles, to matrix3D or even skews. As I am the author of Quaternion.js ( https://github.com/rawify/Quaternion.js ) and working with quaternions for years, I propose the following syntax to CSS:

transform: quat(w, x, y, z);

As an alternative name, quaternion(w, x, y, z) would also be possible. I was searching for discussions in this direction already, but only saw you're trying to decompose rotation matrices for spherical interpolation. I think adding quaternions explicitly would make clear that one can spherically interpolate orientations.

I think it is also consequent to add this syntax since other working groups discuss the introduction of quaternions as well, especially for device orientations or like WebXR's XRRigidTransform.

Also in terms of the gimbal lock problem, it would make sense to be able to apply a rotation in a compact way (with only 4 instead of 6 parameters for a rotation).

I think engines could also benefit from execution speed when only rotations are applied, since the formula to rotate a vector using a quaternion can be improved quite a lot, as I derived/proved here: https://raw.org/proof/vector-rotation-using-quaternions/

What do you guys think of this proposal?

Robert Eisele

Start by reviewing the existing CSS3D transform definitions and the quaternion-related device-orientation and WebXR discussions mentioned in the issue. Compare the proposed quat(w, x, y, z) and quaternion(w, x, y, z) forms with current transform functions and matrix behavior. Done means the proposal has a resolved syntax and specification direction.