## Transform Matrix

The component covers all 3D transform functions and renders the update with either matrix() or matrix3d() functions, depending on the functions used and their values. The notation is also fairly easy to use and familiar with other components.

### Overview

The brand new component to enable complex transform animations of the future.

The KUTE.js Transform Matrix component covers animation for the CSS3 transform style on Element targets but with a different implementation.

- The notation is a little different because we have a different supported functions/properties set, and the value processing function needs to differentiate the two components.
- The 2D transform functions like rotate, translate or scale have been dropped to enable faster value processing and improved performance. The component is geared towards the future of web development with this very specific purpose in mind.
- Most importantly we have the update function which implements the DOMMatrix() API for smooth animation at no performance cost, which is different from other libraries that use a webkitCSSMatrix polyfill and lose performance.
- The script is robust, simple and light in size. It's simply a matter of taste when choosing between the two transform components.

The component was developed for more complex transform animations and comes with additional supported transform functions. According to the W3 draft, the DOMMatrix API will merge the fallback webkitCSSMatrix API and the SVGMatrix API together, so awesome is yet to come.

Due to execution complexity and other performance considerations, and similar to the Transform Functions component, this component provides support for a custom rotate3d[X,Y,Z] tween property which is different from CSS3 standard rotate3d(x,y,z,Angle) shorthand function.

In certain situations you can also use functions like scaleX, rotateY or translateZ for convenience, but the component will always stack translations into translate3d, all scale axes into scale3d, all rotations into rotate3d and both skews into skew.

### 3D Transform

- `perspective` function creates a 3D perspective for a target element transformation. EG. `perspective:400` to apply a 400px perspective.
- `translateX` function is for horizontal translation. EG. `translateX:150` to translate an element 150px to the right.
- `translateY` function is for vertical translation. EG. `translateY:-250` to translate an element 250px towards the top.
- `translateZ` function is for translation on the Z axis in a given 3D field. EG. `translateZ:-250` to translate an element 250px away from the viewer, making it appear smaller. This function can be combined with the `perspective` function to take effect or the parent's perspective; the smaller perspective value, the deeper translation.
- `translate3d` shorthand function is for translation on all the axes in a given 3D field. EG. `translate3d:[-150,200,150]` to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. When third value is used, it requires using a `perspective`.
- `rotateX` function rotates an element on the X axis in a given 3D field. Eg. `rotateX:250` will rotate an element clockwise by 250 degrees on X axis. Requires perspective.
- `rotateY` function rotates an element on the Y axis in a given 3D field. Eg. `rotateY:-150` will rotate an element counter-clockwise by 150 degrees on Y axis. Requires perspective.
- `rotateZ` function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. `rotateZ:90` will rotate an element clockwise by 90 degrees on Z axis.
- `rotate3d` is a tween property, which combines the above `rotateX`, `rotateY`, and `rotateZ` functions and rotates an element on all axes. Eg. `rotate3d:[250,-150,90]` will produce the same effect as the three above combined. The X and Y axes require a `perspective`.
- `skewX` function will apply a shear to a target element on the X axis. Eg. `skewX:50` will skew the element by 50 degrees on X axis.
- `skewY` function will apply a shear to a target element on the Y axis. Eg. `skewY:-50` will skew the element by -50 degrees on Y axis.
- `skew` shorthand function will apply a shear on both X and Y axes to a target element. Eg. `skew:[50,50]` will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.
- `scaleX` function will scale the X axis of a target element. Eg. `scaleX:1.5` will increase the scale of a target element on the X axis by 50%.
- `scaleY` function will scale the Y axis of a target element. Eg. `scaleY:0.5` will decrease the scale of a target element on the Y axis by 50%.
- `scaleZ` function will scale the Z axis of a target element. Eg. `scaleZ:0.75` will decrease the scale of a target element on the Z axis by 25%.
- `scale3d` function will scale a target element on all axes. Eg. `scale3d:[1.5,0.5,0.75]` will produce the same effect as the 3 above combined.
- `matrix` and `matrix3d` are not supported CSS3 transform functions or tween properties, but the results of the update function.

### Example

Now let's have a look at the notation and a quick example:

    let mx1 = KUTE.to('el1', { transform: { translate3d:[-50,-50,-50]} })
    let mx2 = KUTE.to('el2', { transform: { perspective: 100, translateX: -50, rotateX:-180} })
    let mx3 = KUTE.to('el3', { transform: { translate3d:[-50,-50,-50], skew:[-15,-15]} })
    let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-360,0], scaleX:0.5 } })

MX1
MX2
MX3
MX4
Start

So the second element uses it's own perspective but notice that the parent perspective also apply. This case must be avoided in order to keep performance in check: one perspective is best.

### Chained Transformations

Similar to the other component the Transform Matrix component will produce the same visual experience, but with the `matrix3d` function.

FROMTO
FROMTO
TO
TO
Start

### Notes

- This demo page should work with IE10+ browsers.
- Why no support for the `matrix3d` function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. As explained here, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.
- The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable. Such a feature would allow us to kick start animations directly from `matrix3d` string/array values, but considering the size of this component, I let you draw the conclusions.
- Despite the "limitations", we have some tricks available: the `fromTo()` method will never fail and it's much better when performance and sync are a must, and for `to()` method we're storing the values from previous animations to have them ready and available for the next chained animation.
- The performance of this component is identical with the Transform Functions component, which is crazy and awesome, all that thanks to the DOMMatrix API built into our modern browsers. If that's not good enough, the API will automatically switch from `matrix3d` to `matrix` and vice-versa whenever needed to save power. Neat?
- The `rotate3d` property makes alot more sense for this component since the DOMMatrix `rotate(angleX,angleY,angleZ)` method works exactly the same, while the `rotate3d(vectorX,vectorY,vectorZ,angle)` function is a thing of the past, according to Chris Coyier nobody use it.
- Since the component fully utilize the DOMMatrix API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.
- This component is bundled with the demo/src/kute-extra.js distribution file.