<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed lead">The component covers all 3D <i>transform</i> functions and renders the update with either <i>matrix()</i> or <i>matrix3d()</i> functions, depending on the
functions used and their values. The notation is also fairly easy to use and familiar with other components.</p>
<pclass="condensed text-right">The brand new component to enable complex <b>transform</b> animations of the future.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>Transform Matrix</b> component covers animation for the CSS3 <b>transform</b> style on <b>Element</b> targets but with a different implementation.</p>
<ul>
<li>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.</li>
<li>The 2D transform functions like <b>rotate</b>, <b>translate</b> or <b>scale</b> 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.</li>
<li>Most importantly we have the update function which implements the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix">DOMMatrix()</a> API for smooth animation at no
performance cost, which is different from other libraries that use a <b>webkitCSSMatrix</b> polyfill and lose performance.</li>
<li>The script is robust, simple and light in size. It's simply a matter of taste when choosing between the two transform components.</li>
</ul>
<p>The component was developed for more complex transform animations and comes with additional supported transform functions. According to the W3 draft, the <b>DOMMatrix</b> API will merge the
fallback <b>webkitCSSMatrix</b> API and the <b>SVGMatrix</b> API together, so awesome is yet to come.</p>
<p>Due to execution complexity and other performance considerations, and similar to the <ahref="transformFunctions.html">Transform Functions</a> component, this component provides support for a custom
<b>rotate3d[X,Y,Z]</b> tween property which is different from CSS3 standard <b>rotate3d(x,y,z,Angle)</b> shorthand function.</p>
<p>In certain situations you can also use functions like <b>scaleX</b>, <b>rotateY</b> or <b>translateZ</b> for convenience, but the component will always stack translations
into <b>translate3d</b>, all scale axes into <b>scale3d</b>, all rotations into <b>rotate3d</b> and both skews into <b>skew</b>.</p>
<li><kbdclass="bg-indigo">perspective</kbd> function creates a 3D perspective for a target element transformation. EG. <code>perspective:400</code> to apply a 400px perspective.</li>
<li><kbdclass="bg-indigo">translateX</kbd> function is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right.</li>
<li><kbdclass="bg-indigo">translateY</kbd> function is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top.</li>
<li><kbdclass="bg-indigo">translateZ</kbd> function is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px away from the viewer, making it
appear smaller. This function can be combined with the <code>perspective</code> function to take effect or the parent's perspective; the smaller perspective value, the deeper translation.</li>
<li><kbdclass="bg-indigo">translate3d</kbd> shorthand function is for translation on all the axes in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> 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 <code>perspective</code>.</li>
<li><kbdclass="bg-indigo">rotateX</kbd> function rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees on X axis.
Requires perspective.</li>
<li><kbdclass="bg-indigo">rotateY</kbd> function rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees on Y axis.
Requires perspective.</li>
<li><kbdclass="bg-indigo">rotateZ</kbd> function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:90</code> will rotate an element clockwise by 90 degrees on Z axis.</li>
<li><kbdclass="bg-indigo">rotate3d</kbd> is a <b>tween property</b>, which combines the above <code>rotateX</code>, <code>rotateY</code>, and <code>rotateZ</code> functions and rotates an element on all axes.
Eg. <code>rotate3d:[250,-150,90]</code> will produce the same effect as the three above combined. The X and Y axes require a <code>perspective</code>.</li>
<li><kbdclass="bg-indigo">skewX</kbd> function will apply a shear to a target element on the X axis. Eg. <code>skewX:50</code> will skew the element by 50 degrees on X axis.</li>
<li><kbdclass="bg-indigo">skewY</kbd> function will apply a shear to a target element on the Y axis. Eg. <code>skewY:-50</code> will skew the element by -50 degrees on Y axis.</li>
<li><kbdclass="bg-indigo">skew</kbd> shorthand function will apply a shear on both X and Y axes to a target element. Eg. <code>skew:[50,50]</code> will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.</li>
<li><kbdclass="bg-indigo">scaleX</kbd> function will scale the X axis of a target element. Eg. <code>scaleX:1.5</code> will increase the scale of a target element on the X axis by 50%.</li>
<li><kbdclass="bg-indigo">scaleY</kbd> function will scale the Y axis of a target element. Eg. <code>scaleY:0.5</code> will decrease the scale of a target element on the Y axis by 50%.</li>
<li><kbdclass="bg-indigo">scaleZ</kbd> function will scale the Z axis of a target element. Eg. <code>scaleZ:0.75</code> will decrease the scale of a target element on the Z axis by 25%.</li>
<li><kbdclass="bg-indigo">scale3d</kbd> function will scale a target element on all axes. Eg. <code>scale3d:[1.5,0.5,0.75]</code> will produce the same effect as the 3 above combined.</li>
<li><kbdclass="bg-blue">matrix</kbd> and <kbdclass="bg-blue">matrix3d</kbd> are not supported CSS3 transform functions or tween properties, but the results of the update function.</li>
</ul>
<h3>Example</h3>
<p>Now let's have a look at the notation and a quick example:</p>
<p>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.</p>
<h3>Chained Transformations</h3>
<p>Similar to the <ahref="transformFunctions.html">other component</a> the Transform Matrix component will produce the same visual experience, but with the <code>matrix3d</code> function.</p>
<li>This demo page should work with IE10+ browsers.</li>
<li>Why no support for the <code>matrix3d</code> 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 <ahref="https://stackoverflow.com/a/39870758/803358">explained here</a>, 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.</li>
<li>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 <code>matrix3d</code> string/array values, but considering the size of this component, I let you draw the conclusions.</li>
<li>Despite the "limitations", we have some tricks available: the <code>fromTo()</code> method will never fail and it's much better when performance and sync are a must, and for <code>to()</code>
method we're storing the values from previous animations to have them ready and available for the next chained animation.</li>
<li>The performance of this component is identical with the <b>Transform Functions</b> component, which is crazy and awesome, all that thanks to the <b>DOMMatrix</b> API built into our modern browsers.
If that's not good enough, the API will automatically switch from <code>matrix3d</code> to <code>matrix</code> and vice-versa whenever needed to save power. Neat?</li>
<li>The <code>rotate3d</code> property makes alot more sense for this component since the <b>DOMMatrix</b><code>rotate(angleX,angleY,angleZ)</code> method works exactly the same, while the
<code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> function is a thing of the past, according to <ahref="https://css-tricks.com/">Chris Coyier</a> nobody use it.</li>
<li>Since the component fully utilize the <b>DOMMatrix</b> 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.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> distribution file.</li>