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

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

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

Notes