Table of Contents

Interpolation behavior on rotate3d

Spec:
css3-transforms
Owner:
dschulze
Status:
Resolved
Added:
2012-08-10
Action:
Resolve interpolation behavior for rotate3d

Background

The CSS WG asked for tests on the interpolation behavior for rotate3d.

Problem Statement

The current specification request browsers to fallback to matrix interpolation for rotate3d. The CSS WG asked for interpolation tests to check the current behavior on browsers.

I wrote different tests for behavior checking on rotate3d with CSS animation. Since we don't have automated testing, the tests needed to be run manually. I tested the following interpolation scenarios on IE 10pre, FF nightly, Chromium nighlty, Safari6 on 8/10/2012:

rotate3d

none → rotate3d(0,0,1,360deg)

rotate3d(0,0,1,45deg) → rotate3d(0,0,1,405deg)

rotate3d(0,0,-1,45deg) → rotate3d(0,0,1,405deg)

rotate3d(0,0,2,45deg) → rotate3d(0,0,2,405deg)

rotate3d(0,0,2,45deg) → rotate3d(0,0,6,405deg)

rotate3d(0,0,4,45deg) → rotate3d(0,0,-4,405deg)

rotateZ

rotateZ(45deg) → rotate3d(0,0,1,405deg)

rotateZ(45deg) → rotateZ(405deg)

rotate3d(0,0,1,45deg) → rotateZ(405deg)

rotate3d(0,0,2,45deg) → rotateZ(405deg)

rotateZ(45deg) → rotate3d(0,0,2,405deg)

I did more tests with different variations as well (rotateX) and come to the same conclusion: All browsers but Chrome do matrix interpolation when rotate3d is involved. Chrome tries numerical interpolation if 'from' is either rotate3d(0,0,1, <angle>), rotate3d(0,1,0, <angle>) or rotate3d(1,0,0, <angle>). But even Chrome does not interpolate numerically if the length of the vector is not 1.

Proposal(s)

Keep current specification text: when rotate3d is involved, the rotation gets interpolated by matrix decomposing.

Numerical interpolation of rotate3d

The CSS WG asked for a proposal to interpolate rotate3d numerically.

normalization

A normalization of the rotating vectors can help to identify if two vectors point into the same direction.

vectors that describe the same axis, but with opposite directions

An open issue are vectors that describe the same axis, but point into the opposite direction. The normalization does not have an affect on the direction.

Example: rotate3d(0,0,-1,0deg) → rotate3d(0,0,1,360deg). According to the current definition of rotate3d, the direction of the vector influences the rotation direction.

Should…

Current support

No browser supports numerical interpolation at this time. IE 10 won't support it at all. Safari has problems implementing it because of the usage of CoreAnimation. All browsers do matrix decomposing at the moment.

Resolved

Use numerical interpolation if the normalized vectors are equal. Otherwise use matrix decomposing.