You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When interpolating between rotations with different axis alignment, we
always fall back on matrix decomposition.
However, if one of the angles is 0, then the resulting behavior is that the
rotation axis snaps immediately to the other axis. So for example, if I
transition
transform: rotate3d(1, 0, 0, 0deg);
to
transform: rotate3d(0, 0, 1, 810deg);
Then by the specification I should see a single 90deg rotation about the z
axis. If I cancel and restart the transition, then the intermediate results
(matrix) should force decomposition again and everything should be fairly
consistent.
Two things:
(1) Firefox implements this behavior, but Chrome and Safari don't (try e.g. http://jsfiddle.net/2vLyydzv/3/). Chrome executes a 810deg rotation but
messes up if you cancel/uncancel. Safari does something truly bizarre.
(2) this is not compatible with the rotate property from css-transforms-2,
as the rotate property can't have an intermediate result of a matrix and
will instead take a rotation. That's fine for forward transforms but if I
interpolate
rotate: 0deg 1 0 0
to
rotate: 810deg 0 0 1
then I'll have 45deg 0 0 1 at 50%. If I cancel, then
rotate: 45deg 0 0 1
to
rotate: 0deg 1 0 0
will be 22.5deg 0 0 1 at 50%. If I restart the transition, then
rotate: 22.5deg 0 0 1
to
rotate: 810deg 0 0 1
will do angle interpolation rather than matrix rotation, and start spinning
wildly.
Given the lack of conforming behavior in css-transforms-1, and (I believe)
a desire for standardized behavior between css-transforms-1 and
css-transforms-2, I'd like to propose that we special-case rotation to/from
0deg to always snap to the axis of the non-zero rotation and do numeric
interpolation.
This would reduce the cases in which we need to do matrix decomposition,
not produce wildly variant behavior, better match author intention, and
also make the rotate property capable of matching transform in behavior.
Cheers,
-Shane
The text was updated successfully, but these errors were encountered:
smfr
changed the title
Reduce matrix decomposition when rotation axis has zero coord
[css-transforms-1] Reduce matrix decomposition when rotation axis has zero coord
Jan 13, 2017
@fantasai You definitely didn't mean to close this issue - typo in the commit message I suppose?
dirkschulze
changed the title
[css-transforms-1] Reduce matrix decomposition when rotation axis has zero coord
[css-transforms-2] Reduce matrix decomposition when rotation axis has zero coord
Feb 1, 2018
http://www.w3.org/mid/CAGTfzwTS9r+z1LRu=3t25NW0A6yk0b+agaH6__8ZkcSD3-LR9A@mail.gmail.com
Hi list,
When interpolating between rotations with different axis alignment, we
always fall back on matrix decomposition.
However, if one of the angles is 0, then the resulting behavior is that the
rotation axis snaps immediately to the other axis. So for example, if I
transition
transform: rotate3d(1, 0, 0, 0deg);
to
transform: rotate3d(0, 0, 1, 810deg);
Then by the specification I should see a single 90deg rotation about the z
axis. If I cancel and restart the transition, then the intermediate results
(matrix) should force decomposition again and everything should be fairly
consistent.
Two things:
(1) Firefox implements this behavior, but Chrome and Safari don't (try e.g.
http://jsfiddle.net/2vLyydzv/3/). Chrome executes a 810deg rotation but
messes up if you cancel/uncancel. Safari does something truly bizarre.
(2) this is not compatible with the rotate property from css-transforms-2,
as the rotate property can't have an intermediate result of a matrix and
will instead take a rotation. That's fine for forward transforms but if I
interpolate
rotate: 0deg 1 0 0
to
rotate: 810deg 0 0 1
then I'll have 45deg 0 0 1 at 50%. If I cancel, then
rotate: 45deg 0 0 1
to
rotate: 0deg 1 0 0
will be 22.5deg 0 0 1 at 50%. If I restart the transition, then
rotate: 22.5deg 0 0 1
to
rotate: 810deg 0 0 1
will do angle interpolation rather than matrix rotation, and start spinning
wildly.
Given the lack of conforming behavior in css-transforms-1, and (I believe)
a desire for standardized behavior between css-transforms-1 and
css-transforms-2, I'd like to propose that we special-case rotation to/from
0deg to always snap to the axis of the non-zero rotation and do numeric
interpolation.
This would reduce the cases in which we need to do matrix decomposition,
not produce wildly variant behavior, better match author intention, and
also make the rotate property capable of matching transform in behavior.
Cheers,
-Shane
The text was updated successfully, but these errors were encountered: