CODEWITHSUNDEEP
csscss-transitionstransformcss-transforms
Theer
Theer

Reputation: 53

Same value of transformations but different order. Why the rotation degree is different?

You can see the same transformations, only thing which differs is order of them.

When the order of them is different, rotate will animate (360-0)%360deg.But when the order of them is same too, rotate will animate (360-0)deg. I know I should ensure that the order and value are the same. But I want to know why different animations only happen on the rotate. How did this be calculated ?

.test {
  margin: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
  transform: rotate(0) scale(.5);
}
/*css1*/

.test:hover {
  transform: scale(1) rotate(360deg);
}
/*css2*/

#btn:hover+.test {
  transform: rotate(360deg) scale(1);
}
<button id="btn">css2</button>
<div class="test">
  css1
</div>

Demo is here

Upvotes: 2

Views: 419

Answers (1)

Harry
Harry

Reputation: 89750

The order matters to a very great extent for CSS transforms. Please have a look at the four points specified in the Interpolation of Transforms section in the W3C Transform Specs (especially Point 4) and after that have a look at the Interpolation of Matrices section.

Below is an excerpt from the Interpolation of Transforms section without examples (emphasis mine):

When animating or transitioning transforms, the transform function lists must be interpolated. For interpolation between one transform from-transform and a second transforms to-transform, the rules described below are applied.

If both the from- and to-transform are none:

  • There is no interpolation necessary. The computed value stays none.

If one of the from- or to-transforms is none.

  • The value none is replaced by an equivalent identity transform function list for the corresponding transform function list. Both transform function lists get interpolated following the next rule.

If from- and to-transform have the same number of transform functions, each transform function pair has either the same name, or is a derivative of the same primitive.

  • Interpolate each transform function pair as described in Interpolation of transform functions. The computed value is the resulting transform function list.

In all other cases:

  • The transform functions of each transform function list on the from- and to-transform get post multiplied and converted into 4x4 matrices. Each of the matrices gets interpolated following the instructions in Interpolation of matrices. The computed value is the transform function matrix if both initial matrices can be represented by a correlating 3x2 matrix and matrix3d otherwise.

Case 1: Order is different

Based on Interpolation of Transforms section, our test element satisfies point 4 because neither start or end transform value is none and they are not in same order or is a derivative of the same primitive (that is, basically, they are different types of transforms).

So, the transforms specified for the default and :hover states are converted into a matrix and is then interpolated using Interpolation of matrices.

The element's default transform was a rotate(0) scale(0.5) which in matrix form is matrix(0.5, 0, 0, 0.5, 0, 0) and the modified transform is scale(1) rotate(360deg) which is matrix(1, 0, 0, 1, 0, 0). As you can note from the example provided under Interpolation of Matrices section, the information about the one turn gets lost because 360deg is nothing but 0deg in matrix representation. Thus the element only grows and doesn't rotate.

Case 2: Order is same

This is pretty straightforward. As you'd have guessed, it satisfies point 3 in Interpolation of Transforms and is hence not converted into a matrix. It is directly interpolated. So the rotate transform's value is constantly incremented from 0 to 360 inline with the duration of the transition and its timing function. So we get to see the actual rotation also in addition to the grow effect.

Upvotes: 4

Related Questions