<div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>

<div style="transform:translate(-10px,-20px)">
  <div style="transform:scale(2)">
    <div style="transform:rotate(45deg)">
      <div style="transform:translate(5px,10px)">
      </div>
    </div>
  </div>
</div>

  <style>
  .box {
    transform: scale(0);
  }
  </style>

  <div class="box">
    Not visible
  </div>
  

• If both the from- and to-transform are ''transform/none'': * There is no interpolation necessary. The computed value stays ''transform/none''.
• If one of the from- or to-transforms is ''transform/none''. * The value ''transform/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.
  For example, if from-transform is ''scale(2)'' and to-transform is ''transform/none'' then the value ''scale(1)'' will be used for to-transform and animation will proceed using the next rule. Similarly, if from-transform is ''transform/none'' and to-transform is ''scale(2) rotate(50deg)'' then the animation will execute as if from-transform is ''scale(1) rotate(0)''.
• 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.
  For example, if from-transform is ''scale(1) translate(0)'' and to-transform is ''translate(100px) scale(2)'' then ''scale(1)'' and ''translate(100px)'' as well as ''translate(0)'' and ''scale(2)'' don't share a common primitive and therefore can not get interpolated following this rule.
• 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.

''translate()''

for ''translateX()'', ''translateY()'' and ''translate()''.

''rotate()'' with three arguments

for ''rotate()'' with one or three arguments if rotate with three arguments is supported.

''scale()''

for ''scaleX()'', ''scaleY()'' and ''scale()''.

''translate3d()''

for ''translateX()'', ''translateY()'', ''translateZ()'' and ''translate()''.

''scale3d()''

for ''scaleX()'', ''scaleY()'', ''scaleZ()'' and ''scale()''.

''rotate3d()''

for ''rotate()'', ''rotateX()'', ''rotateY()'' and ''rotateZ()''.

For derived transform functions that have a two-dimensional primitive and a three-dimensional primitive, the context decides about the used primitive. See Interpolation of primitives and derived transform functions. Interpolation of primitives and derived transform functions {#interpolation-of-transform-functions} =================================================================================================== Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments. Special rules apply to ''matrix()''.

  div {
    transform: translateX(100px);
  }

  div:hover {
    transform: translateY(100px);
    transition: transform 3s;
  }
  

  div {
    transform: translateX(100px);
  }

  div:hover {
    transform: translateZ(100px);
    transition: transform 3s;
  }
  

  <style>
  div {
    transform: rotate(45deg);
  }
  div:hover {
    transform: translate(100px, 100px) rotate(1215deg);
    transition: transform 3s;
  }
  </style>

  <div></div>
  

Supporting functions

Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix, vector is a 4 component vector):
  double  determinant(matrix)          returns the 4x4 determinant of the matrix
  matrix  inverse(matrix)              returns the inverse of the passed matrix
  matrix  transpose(matrix)            returns the transpose of the passed matrix
  point   multVecMatrix(point, matrix) multiplies the passed point by the passed matrix
                                       and returns the transformed point
  double  length(point)                returns the length of the passed vector
  point   normalize(point)             normalizes the length of the passed point to 1
  double  dot(point, point)            returns the dot product of the passed points
  double  sqrt(double)                 returns the root square of passed value
  double  max(double y, double x)      returns the bigger value of the two passed values
  double  dot(vector, vector)         returns the dot product of the passed vectors
  vector  multVector(vector, vector)  multiplies the passed vectors
  double  sqrt(double)                returns the root square of passed value
  double  max(double y, double x)     returns the bigger value of the two passed values
  double  min(double y, double x)     returns the smaller value of the two passed values
  double  cos(double)                 returns the cosines of passed value
  double  sin(double)                 returns the sine of passed value
  double  acos(double)                returns the inverse cosine of passed value
  double  abs(double)                  returns the absolute value of the passed value
  double  rad2deg(double)              transforms a value in radian to degree and returns it
  double  deg2rad(double)              transforms a value in degree to radian and returns it

Decomposition also makes use of the following function:
  point combine(point a, point b, double ascl, double bscl)
      result[0] = (ascl * a[0]) + (bscl * b[0])
      result[1] = (ascl * a[1]) + (bscl * b[1])
      result[2] = (ascl * a[2]) + (bscl * b[2])
      return result

Interpolation of 2D matrices

Decomposing a 2D matrix

Input:  matrix      ; a 4x4 matrix
Output: translation ; a 2 component vector
        scale       ; a 2 component vector
        angle       ; rotation
        m11         ; 1,1 coordinate of 2x2 matrix
        m12         ; 1,2 coordinate of 2x2 matrix
        m21         ; 2,1 coordinate of 2x2 matrix
        m22         ; 2,2 coordinate of 2x2 matrix
Returns false if the matrix cannot be decomposed, true if it can


double row0x = matrix[0][0]
double row0y = matrix[0][1]
double row1x = matrix[1][0]
double row1y = matrix[1][1]

translate[0] = matrix[3][0]
translate[1] = matrix[3][1]

scale[0] = sqrt(row0x * row0x + row0y * row0y)
scale[1] = sqrt(row1x * row1x + row1y * row1y)

// If determinant is negative, one axis was flipped.
double determinant = row0x * row1y - row0y * row1x
if (determinant < 0)
    // Flip axis with minimum unit vector dot product.
    if (row0x < row1y)
        scale[0] = -scale[0]
    else
        scale[1] = -scale[1]

// Renormalize matrix to remove scale.
if (scale[0])
    row0x *= 1 / scale[0]
    row0y *= 1 / scale[0]
if (scale[1])
    row1x *= 1 / scale[1]
    row1y *= 1 / scale[1]

// Compute rotation and renormalize matrix.
angle = atan2(row0y, row0x);

if (angle)
    // Rotate(-angle) = [cos(angle), sin(angle), -sin(angle), cos(angle)]
    //                = [row0x, -row0y, row0y, row0x]
    // Thanks to the normalization above.
    double sn = -row0y
    double cs = row0x
    double m11 = row0x
    double m12 = row0y
    double m21 = row1x
    double m22 = row1y
    row0x = cs * m11 + sn * m21
    row0y = cs * m12 + sn * m22
    row1x = -sn * m11 + cs * m21
    row1y = -sn * m12 + cs * m22

m11 = row0x
m12 = row0y
m21 = row1x
m22 = row1y

// Convert into degrees because our rotation functions expect it.
angle = rad2deg(angle)

return true

Interpolation of decomposed 2D matrix values

Input: translationA ; a 2 component vector
       scaleA       ; a 2 component vector
       angleA       ; rotation
       m11A         ; 1,1 coordinate of 2x2 matrix
       m12A         ; 1,2 coordinate of 2x2 matrix
       m21A         ; 2,1 coordinate of 2x2 matrix
       m22A         ; 2,2 coordinate of 2x2 matrix
       translationB ; a 2 component vector
       scaleB       ; a 2 component vector
       angleB       ; rotation
       m11B         ; 1,1 coordinate of 2x2 matrix
       m12B         ; 1,2 coordinate of 2x2 matrix
       m21B         ; 2,1 coordinate of 2x2 matrix
       m22B         ; 2,2 coordinate of 2x2 matrix


// If x-axis of one is flipped, and y-axis of the other,
// convert to an unflipped rotation.
if ((scaleA[0] < 0 && scaleB[1] < 0) || (scaleA[1] < 0 && scaleB[0] < 0))
    scaleA[0] = -scaleA[0]
    scaleA[1] = -scaleA[1]
    angleA += angleA < 0 ? 180 : -180

// Don't rotate the long way around.
if (!angleA)
    angleA = 360
if (!angleB)
    angleB = 360

if (abs(angleA - angleB) > 180)
    if (angleA > angleB)
        angleA -= 360
    else
        angleB -= 360

Recomposing to a 2D matrix

Input:  translation ; a 2 component vector
        scale       ; a 2 component vector
        angle       ; rotation
        m11         ; 1,1 coordinate of 2x2 matrix
        m12         ; 1,2 coordinate of 2x2 matrix
        m21         ; 2,1 coordinate of 2x2 matrix
        m22         ; 2,2 coordinate of 2x2 matrix
Output: matrix      ; a 4x4 matrix initialized to identity matrix


matrix[0][0] = m11
matrix[0][1] = m12
matrix[1][0] = m21
matrix[1][1] = m22

// Translate matrix.
matrix[3][0] = translate[0] * m11 + translate[1] * m21
matrix[3][1] = translate[0] * m12 + translate[1] * m22

// Rotate matrix.
angle = deg2rad(angle);
double cosAngle = cos(angle);
double sinAngle = sin(angle);

// New temporary, identity initialized, 4x4 matrix rotateMatrix
rotateMatrix[0][0] = cosAngle
rotateMatrix[0][1] = sinAngle
rotateMatrix[1][0] = -sinAngle
rotateMatrix[1][1] = cosAngle

matrix = multiply(matrix, rotateMatrix)

// Scale matrix.
matrix[0][0] *= scale[0]
matrix[0][1] *= scale[0]
matrix[1][0] *= scale[1]
matrix[1][1] *= scale[1]

• A 2D 3x2 matrix with six parameters a, b, c, d, e and f is equivalent to the matrix:

• A 2D translation with the parameters tx and ty is equivalent to a 3D translation where tz has zero as a value.

• A 2D scaling with the parameters sx and sy is equivalent to a 3D scale where sz has one as a value.

• A 2D rotation with the parameter alpha is equivalent to a 3D rotation with vector [0,0,1] and parameter alpha.

• A 2D skew like transformation with the parameters alpha and beta is equivalent to the matrix:

• A 2D skew transformation along the X axis with the parameter alpha is equivalent to the matrix:

• A 2D skew transformation along the Y axis with the parameter beta is equivalent to the matrix:

Changes since last publication

Acknowledgments