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.


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

2D Transform

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.


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});

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.


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});

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.


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

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

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: