## Transform Functions

The component covers most important 2D and 3D transform functions as described in the W3 specification, completelly reworked for improved performance and faster value processing.

### Overview

The component to cover animation for most transform functions with improved performance and faster value processing.

The KUTE.js Transform Functions enables animation for the CSS3 transform style on Element targets on modern browsers. For specific legacy browsers there is another component called Transform Legacy you will find in the source folders.

Starting with KUTE.js version 2.0, you can set the perspective function as a tween property, while you can still rely on a parent's perspective but for less performance.

All the previous perspective related options have been removed. The transform CSS3 property itself no longer uses preffixes like webkit, moz or ms since all major browsers are standardized.

In comparison with previous versions, the component expects that input values are already px and deg based and no longer transforms % percent based values into px based or rad based angles into deg based. This makes the execution faster and more consistent.

The component will stack all transform functions for translations, rotations and skews to shorthand functions to optimize performance and minimize value processing.

### 3D Transform

- `perspective` function creates a 3D perspective for a target element transformation. EG. `perspective:400` to apply a 400px perspective. `IE10+`
- `translateX` function is for horizontal translation. EG. `translateX:150` to translate an element 150px to the right. `IE10+`
- `translateY` function is for vertical translation. EG. `translateY:-250` to translate an element 250px towards the top. `IE10+`
- `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. `IE10+`
- `translate3d` function is for movement on all 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`. `IE10+`
- `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. Requires perspective. `IE10+`
- `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. Requires perspective. `IE10+`
- `rotateZ` function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. `rotateZ:-150` will rotate an element counter-clockwise by 150 degrees on X axis. `IE10+`
- `rotate3d` is a tween property, which combines the above `rotateX`, `rotateY`, and `rotateZ` functions and rotates an element on all axes. Obviously this is NOT equivalent with the `rotate3d(vectorX,vectorY,vectorZ,angle)` shorthand function, this is only an optimization implemented for performance reasons and hopefully for your convenience. Eg. `rotate3d:[-150,80,90]` will rotate an element counter-clockwise by 150 degrees on X axis, 80 degrees on Y axis and 90 degrees on Z axis. The X and Y axis require a `perspective`. `IE10+`
- `matrix3d` and `scale3d` functions are not supported by this component, but they are implemented in the transformMatrix component.

### 2D Transform

- `translate` function is for movement on X and Y axis. EG. `translate:[-150,200]` to translate an element 150px to the left, 200px to the bottom. `IE9+`
- `rotate` function rotates an element on the Z axis. Eg. `rotate:250` will rotate an element clockwise by 250 degrees. `IE9+`
- `skewX` function will apply a shear on X axis to a target element. Eg. `skewX:50` will skew a target element on X axis by 50 degrees. `IE9+`
- `skewY` function will apply a shear on X axis to a target element. Eg. `skewX:50` will skew a target element on X axis by 50 degrees. `IE9+`
- `skew` 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. `IE9+`
- `scale` function will scale a target element on all axes. Eg. `scale:1.5` will scale up a target element by 50%. `IE9+`
- `matrix` is not supported by this component, but is implemented in the transformMatrix component.

As a quick note, all input values for `translate`, `rotate` or single axis translation, skew or rotation will be all stacked into `translate3d`, `skew` and `rotate3d` respectivelly; this is to further improve performance on modern browsers.

### Translations

    var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:250}); // or translate:[x,y] for both axes
    var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:-250});
    var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,250,0]});
    var tween4 = KUTE.fromTo('selector4',{perspective:400,translateY:0},{perspective:200,translateY:-100});

2D
X
Y
Z
Start

As you can see in your browsers console, for all animations `translate3d` is used, as explained above. Also the first example that's using the 2D `translate` for both vertical and horizontal axis even if we only set X axis.

### Rotations

    var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
    var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
    var tween3 = KUTE.fromTo('selector3',{perspective:100,rotate3d:[0,0,0]},{perspective:100,rotate3d:[0,160,0]});
    var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});

2D
X
Y
Z
Start

The `rotateX` and `rotateY` are 3D based rotations, so they require a perspective in order to make the browser render proper 3D layers, but in the example they animate different because only the second, Y axis, uses the `perspective` function. The rotation on Z axis does not require a perspective. Unlike translations, you can stack all axis rotation for your animation, but we will see that in a later example.

### Skews

    var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
    var tween2 = KUTE.fromTo('selector2',{skew:[0,0]},{skew:[0,45]});

X
Y
Start

### Mixed Transformations

The current specification does not support animating different transform properties with multiple tween objects at the same time, you must stack them all together into a single object. See the example below:

    var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
    var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();

If you check the test here, you will notice that only the `skewY` is going to work and no rotation. Now let's do this properly.

    var tween1 = KUTE.fromTo(
      'selector1', // element
      {pespective:200,translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
      {pespective:200,translateX:250, rotateX:360, rotateY:15, rotateZ:5} // to
    );
    var tween2 = KUTE.fromTo(
      'selector2', // element
      {translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
      {translateX:-250, rotateX:360, rotateY:15, rotateZ:5} // to
    );

self perspective 200px
parent perspective 400px
Start

Note in this example, the first tween object uses the element's `perspective` while the second relies on the parent's perspective.

### Chained Transformations

KUTE.js has the ability to stack transform functions in a way to improve performance and optimize your workflow. In that idea the `.to()` method can be the right choice for most of your animation needs and especially to link animations together because it has the ability to check the current values of the transform functions found in the element's inline styling, mostly from previous tween animation, and use them as start values for the next animation. OK now, let's see a side by side comparison with 4 elements:

FROMTO
FROMTO
TO
TO
Start

#### Observations

- The example hopefully demostrates what the animation looks like with different combinations of transform functions and how to combine them to optimize your workflow, size on disk as well as to how to link animations together in a smooth continuous animation.
- No matter the input values, the component will always stack translations into `translate3d` and rotations into `rotate3d`.
- The first box uses a regular `.fromTo()` object, from point A to B and back to A, with the exact coordinates we want.
- The second box is also using `.fromTo()` object, but using all values for all tweens at all times, so we gave the animation a sense of continuity.
- The third box uses the `.to()` method, and will try and continue animation from last animation, but we "forgot" to keep track on the rotation of the X axis.
- The last box also uses the `.to()` method, and uses all values and reproduce the animation of the second box exactly, but with nearly half the code.

### Notes

- This demo page should work with IE10+ browsers.
- The order of the transform functions/properties is always the same: `perspective`, `translation`, `rotation`, `skew`, `scale`, this way we can prevent jumpy/janky animations; one of the reasons is consistency in all transform based components and another reason is the order of execution from the draft for matrix3d recomposition.
- Tests reveal that an element's own perspective produce better performance than using the parent's perspective. Also having both will severelly punish the animation performance, so keep that in mind when you work on optimizing your code.
- Use single axis transform functions like `translateX` when you want to animate the Y and Z axes back to ZERO, but in a convenient way.
- Use shorthand functions like `translate3d` when you want to animate / keep multiple axes.
- Shorthand functions like `translate3d` or `rotate3d` tween property generally not only improve performance, but will also minimize the code size. Eg. `translateX:150`, `translateY:200`, `translateZ:50` => `translate3d:[150,200,50]` is quite the difference.
- On larger amount of elements animating chains, the `.fromTo()` method is fastest, and you will have more work to do as well, but will eliminate any delay / syncronization issue that may occur.
- This component is bundled with the demo/src/kute-base.js and the standard kute.js distribution files.