A matrix computed for elements in a 3D rendering context, as described below.
+ A transform function that is
+ equivalent to a identity 4x4 matrix (see Mathematical Description of Transform
+ Functions). Examples for identity transform functions are
+ ‘translate(0)translate3d(0, 0, 0)translateX(0)translateY(0)translateZ(0)scale(1)scaleX(1)scaleY(1)scaleZ(1)rotate(0)rotate3d(1, 1, 1, 0)rotateX(0)rotateY(0)rotateZ(0)skewX(0)skewY(0)matrix(1, 0, 0, 1, 0,
+ 0)matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0,
+ 1)
A containing block hierarchy of one or more levels, instantiated by
elements with a computed value for the ‘transform-style
That is, in the absence of other styling that affects position and dimensions, a nested set of transforms is equivalent to a single list of transform functions, applied from the outside in. The resulting transform is the matrix multiplication of the list of transforms.
- When animating or transitioning the value of a transform property the
- rules described below are applied. The ‘from’ transform is the transform at the start
- of the transition or current keyframe. The ‘end’ transform is the transform at the end of
- the transition or current keyframe.
+
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.
from’ and
- ‘to’ transforms are both single
- functions of the same type:
+ nonenonefrom’ and
- ‘to’ transforms are "none":
+ nonenonefrom’ or
- ‘to’ transforms is "none":
+ For example, if from-transform is ‘scale(2)nonescale(1)nonescale(2) rotate(50deg)scale(1) rotate(0)
none’ is replaced by
- an equivalent identity function list for the corresponding transform
- function list.
- For example, if the ‘from’
- transform is "scale(2)" and the ‘to’ transform is "none" then the value
- "scale(1)" will be used as the ‘to’ value, and animation will proceed
- using the rule above. Similarly, if the ‘from’ transform is "none" and the
- ‘to’ transform is "scale(2)
- rotate(50deg)" then the animation will execute as if the ‘from’ value is "scale(1) rotate(0)".
The identity functions are translate(0), translate3d(0, 0, 0), - translateX(0), translateY(0), translateZ(0), scale(1), scale3d(1, 1, - 1), scaleX(1), scaleY(1), scaleZ(1), rotate(0), rotate3d(1, 1, 1, 0), - rotateX(0), rotateY(0), rotateZ(0), skewX(0), skewY(0), matrix(1, 0, - 0, 1, 0, 0) and matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, - 1).
+from’ and
- ‘to’ transforms have the same
- number of transform functions and corresponding functions in each
- transform list are of the same type:
- For example, if from-transform is ‘scale(1) translate(0)translate(100px) scale(2)scale(1)translate(100px)translate(0)scale(2)
matrixmatrix3dIn some cases, an animation might cause a transformation matrix to be singular or non-invertible. For example, an animation in which scale moves from 1 to -1. At the time when the matrix is in such a state, the transformed element is not rendered. +
For all interpolation steps it is assumed that the units for + <length> and <translation-value> + arguments are in pixels and in degrees for <angle> + arguments. Values in other units must be translated to these units before + any interpolation step. + +
Some transform functions can be represented by more generic transform + functions. These transform functions are called derived transform + functions, the generic transform functions primitives. Primitives for + two-dimensional and three-dimensional transform functions are listed + below. + +
Two-dimensional primitives and derived transform functions are: + +
translate(<translation-value>,
+ <translation-value>)
+
+ translateX(<translation-value>),
+ translateY(<translation-value>) and translate(<translation-value>).
+
+ rotate(<angle>, <translation-value>,
+ <translation-value>)
+
+ rotate(<angle>) if rotate with three arguments is
+ supported.
+
+ rotate(<angle>)
+
+ scale(<number>, <number>)
+
+ scaleX(<number>), scaleY(<number>) and scale(<number>).
+
+ skewX(<angle>)
+
+ skewY(<angle>)
+
+ Three-dimensional primitives and derived transform functions are: + +
translate3d(<translation-value>,
+ <translation-value>, <length>)
+
+ translateX(<translation-value>),
+ translateY(<translation-value>), translateZ(<number>) and translate(<translation-value>[,
+ <translation-value>]).
+
+ scale3d(<number>, <number>,
+ <number>)
+
+ scaleX(<number>), scaleY(<number>), scaleZ(<number>) and scale(<number>[, <number>]). Every primitive listed above is a derivative on its own. E.g translate(<translation-value>,
+ <translation-value>) can be interpolated with every other
+ transform function that has translate(<translation-value>,
+ <translation-value>) as primitive.
+
+
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. + +
Not listed transform functions are neither primitives nor derivatives + and can neither be interpolated with transform functions of primitives + listed above nor with itself. UAs have to follow the last rule on Interpolation of Transforms then. + +
Two transform functions of the same type and the same count of + arguments are interpolated numerically without a former conversion. The + calculated value will be of the same transform function type with the same + count of arguments. + +
The two transform functions ‘translate(0)translate(100px)translateX(100px)translate(100px,
+ 0)
Two different types of transform functions that share the same + primitive, or transform functions of the same type with different count of + arguments can be interpolated. Both transform functions need a former + conversion to the common primitive first and get interpolated numerically + afterwards. The computed value will be the primitive with the resulting + interpolated arguments. + +
The following example describes a transition from ‘translateX(100px)translateY(100px)translate(<translation-value>,
+ <translation-value>) and therefore can be interpolated.
div {
+ transform: translateX(100px);
+}
+
+div:hover {
+ transform: translateY(100px);
+ transition: transform 3s;
+}
+
+ For the time of the transition both transform functions get
+ transformed to the common primitive. ‘translateX(100px)translate(100px,
+ 0)translateY(100px)translate(0,
+ 100px)
If both transform functions share a primitive in the two-dimensional + space, both transform functions get converted to the two-dimensional + primitive. If one or both transform functions are three-dimensional + transform functions, the common three-dimensional primitive is used. + +
In this example a two-dimensional transform function gets animated to
+ a three-dimensional transform function. The common primitive is translate3d.
div {
+ transform: translateX(100px);
+}
+
+div:hover {
+ transform: translateZ(100px);
+ transition: transform 3s;
+}
+
+ First both functions, ‘translateX(100px)translateZ(100px)translate3d(100px, 0,
+ 0)translate3d(0, 0, 100px)
When interpolating between 2 matrices, each is decomposed into the corresponding translation, rotation, scale, skew and perspective values. Not all matrices can be accurately described by these values. Those that can't are decomposed into the most accurate representation possible, using the technique below. This technique is taken from the "unmatrix" method in @@ -2739,16 +2984,19 @@ div { title="accumulated 3D transformation matrix">4.
A matrix computed for elements in a 3D rendering context, as described below.
+ A transform function that is equivalent to a
+ identity 4x4 matrix (see Mathematical
+ Description of Transform Functions). Examples for identity transform functions
+ are 'translate(0)', 'translate3d(0, 0,
+ 0)', 'translateX(0)', 'translateY(0)', 'translateZ(0)', 'scale(1)', 'scaleX(1)', 'scaleY(1)', 'scaleZ(1)', 'rotate(0)', 'rotate3d(1, 1, 1, 0)',
+ 'rotateX(0)', 'rotateY(0)',
+ 'rotateZ(0)', 'skewX(0)', 'skewY(0)', 'matrix(1, 0, 0, 1, 0, 0)'
+ and 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0,
+ 1)'.
+
A containing block hierarchy of one or more levels, instantiated by elements with a computed value for
the 'transform-style' property of 'preserve-3d',
whose elements share a common three-dimensional coordinate system.
That is, in the absence of other styling that affects position and dimensions, a nested set of transforms is equivalent to a single list of transform functions, applied from the outside in. The resulting transform is the matrix multiplication of the list of transforms.
- + +- When animating or transitioning the value of a transform property - the rules described below are applied. The 'from' transform is - the transform at the start of the transition or current keyframe. The - 'end' transform is the transform at the end of the transition or - current keyframe. + 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.
none':
none'.
none'.
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 '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 'none' and
+ to-transform is 'scale(2) rotate(50deg)'
+ then the animation will execute as if from-transform is 'scale(1) rotate(0)'.
+
- For example, if the 'from' transform is "scale(2)" and the 'to' - transform is "none" then the value "scale(1)" will be used as the - 'to' value, and animation will proceed using the rule above. - Similarly, if the 'from' transform is "none" and the 'to' transform - is "scale(2) rotate(50deg)" then the animation will execute as - if the 'from' value is "scale(1) rotate(0)". -
-- The identity functions are translate(0), translate3d(0, 0, 0), - translateX(0), translateY(0), translateZ(0), scale(1), scale3d(1, 1, 1), - scaleX(1), scaleY(1), scaleZ(1), rotate(0), rotate3d(1, 1, 1, 0), - rotateX(0), rotateY(0), rotateZ(0), skewX(0), skewY(0), - matrix(1, 0, 0, 1, 0, 0) and - matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1). -
+ 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.
+
matrix' if
+ both initial matrices can be represented by a correlating 3x2 matrix and
+ 'matrix3d' otherwise.
- In some cases, an animation might cause a transformation matrix to - be singular or non-invertible. For example, an animation in which - scale moves from 1 to -1. At the time when the matrix is in such - a state, the transformed element is not rendered. + In some cases, an animation might cause a transformation matrix to be singular or + non-invertible. For example, an animation in which scale moves from 1 to -1. At the + time when the matrix is in such a state, the transformed element is not rendered.
++ For all interpolation steps it is assumed that the units for + <length> and <translation-value> arguments are in + pixels and in degrees for <angle> arguments. Values in other units + must be translated to these units before any interpolation step. +
+ ++ Some transform functions can be represented by more generic transform functions. + These transform functions are called derived transform functions, the generic + transform functions primitives. Primitives for two-dimensional and + three-dimensional transform functions are listed below. +
+ ++ Two-dimensional primitives and derived transform functions are: +
+ +translate(<translation-value>,
+ <translation-value>)
+ translateX(<translation-value>),
+ translateY(<translation-value>) and
+ translate(<translation-value>).
+ rotate(<angle>, <translation-value>,
+ <translation-value>)
+ rotate(<angle>) if
+ rotate with three arguments is supported.
+ rotate(<angle>)
+ scale(<number>, <number>)
+ scaleX(<number>), scaleY(<number>) and scale(<number>).
+ skewX(<angle>)
+ skewY(<angle>)
+ + Three-dimensional primitives and derived transform functions are: +
+ +translate3d(<translation-value>,
+ <translation-value>, <length>)
+ translateX(<translation-value>), translateY(<translation-value>), translateZ(<number>) and translate(<translation-value>[,
+ <translation-value>]).
+ scale3d(<number>, <number>, <number>)
+ scaleX(<number>), scaleY(<number>), scaleZ(<number>) and scale(<number>[, <number>]).
+
+ Every primitive listed above is a derivative on its own. E.g translate(<translation-value>, <translation-value>)
+ can be interpolated with every other transform function that has translate(<translation-value>, <translation-value>)
+ as primitive.
+
+ 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. +
+ ++ Not listed transform functions are neither primitives nor derivatives and can + neither be interpolated with transform functions of primitives listed above nor + with itself. UAs have to follow the last rule on Interpolation + of Transforms then. +
+ ++ Two transform functions of the same type and the same count of arguments are + interpolated numerically without a former conversion. The calculated value will be + of the same transform function type with the same count of arguments. +
+ +
+ The two transform functions 'translate(0)' and 'translate(100px)' are of the same type, have the same count of
+ arguments and therefore can get interpolated numerically. 'translateX(100px)' is not of the same type and 'translate(100px, 0)' does not have the same count of arguments,
+ therefore these transform functions can not get interpolated without a former
+ conversion step.
+
+ Two different types of transform functions that share the same primitive, or + transform functions of the same type with different count of arguments can be + interpolated. Both transform functions need a former conversion to the common + primitive first and get interpolated numerically afterwards. The computed value + will be the primitive with the resulting interpolated arguments. +
+ +
+ The following example describes a transition from 'translateX(100px)' to 'translateY(100px)' in 3 seconds on hovering over the div box.
+ Both transform functions derive from the same primitive translate(<translation-value>, <translation-value>)
+ and therefore can be interpolated.
+
div {
+ transform: translateX(100px);
+}
+
+div:hover {
+ transform: translateY(100px);
+ transition: transform 3s;
+}
+
+
+ For the time of the transition both transform functions get transformed to the
+ common primitive. 'translateX(100px)' gets converted to
+ 'translate(100px, 0)' and 'translateY(100px)' gets converted to 'translate(0, 100px)'. Both transform functions can get
+ interpolated numerically now.
+
+ If both transform functions share a primitive in the two-dimensional space, both + transform functions get converted to the two-dimensional primitive. If one or both + transform functions are three-dimensional transform functions, the common + three-dimensional primitive is used. +
+ +
+ In this example a two-dimensional transform function gets animated to a
+ three-dimensional transform function. The common primitive is translate3d.
+
div {
+ transform: translateX(100px);
+}
+
+div:hover {
+ transform: translateZ(100px);
+ transition: transform 3s;
+}
+
+
+ First both functions, 'translateX(100px)' and
+ 'translateZ(100px)' get converted to 'translate3d(100px, 0, 0)' and 'translate3d(0, 0, 100px)'. Afterwards both converted transform
+ functions get interpolated numerically.
+
When interpolating between 2 matrices, each is decomposed into the corresponding translation, rotation, scale, skew and perspective values. Not all matrices can be accurately described by these values.