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.
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 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.
perspective:400 to apply a 400px perspective.translateX:150 to translate an element 150px to the right.translateY:-250 to translate an element 250px towards the top.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:[-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:250 will rotate an element clockwise by 250 degrees on X axis.
Requires perspective.rotateY:-150 will rotate an element counter-clockwise by 150 degrees on Y axis.
Requires perspective.rotateZ:90 will rotate an element clockwise by 90 degrees on Z axis.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:50 will skew the element by 50 degrees on X axis.skewY:-50 will skew the element by -50 degrees on Y axis.skew:[50,50] will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.scaleX:1.5 will increase the scale of a target element on the X axis by 50%.scaleY:0.5 will decrease the scale of a target element on the Y axis by 50%.scaleZ:0.75 will decrease the scale of a target element on the Z axis by 25%.scale3d:[1.5,0.5,0.75] will produce the same effect as the 3 above combined.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 } })
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.
Similar to the other component the Transform Matrix component will produce the same visual experience, but with the matrix3d function.
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.matrix3d string/array values, but considering the size of this component, I let you draw the conclusions.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.matrix3d to matrix and vice-versa whenever needed to save power. Neat?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.