215 lines
18 KiB
HTML
215 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
|
<meta name="description" content="The transformFunctions component for KUTE.js to enable your regular transform animations.">
|
|
<meta name="keywords" content="css3 transform matrix,transform,matrix3d,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
|
|
<meta name="author" content="dnp_theme">
|
|
<link rel="shortcut icon" href="./assets/img/favicon.ico">
|
|
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
|
|
|
|
<title>KUTE.js Transform Matrix</title>
|
|
|
|
<!-- RESET CSS -->
|
|
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
|
|
|
<!-- DEMO KUTE CSS -->
|
|
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
|
|
|
<!-- Synthax highlighter -->
|
|
<link href="./assets/css/prism.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="site-wrapper">
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="content-wrap">
|
|
<nav class="navbar">
|
|
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
|
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
|
<ul class="nav">
|
|
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="transformFunctions.html">Transform Functions</a></li>
|
|
<li class="active"><a href="transformMatrix.html">Transform Matrix</a></li>
|
|
<li><a href="svgTransform.html">SVG Transform</a></li>
|
|
<li><a href="svgMorph.html">SVG Morph</a></li>
|
|
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
|
|
<li><a href="svgDraw.html">SVG Draw</a></li>
|
|
<li><a href="filterEffects.html">Filter Effects</a></li>
|
|
<li><a href="borderRadius.html">Border Radius</a></li>
|
|
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
|
|
<li><a href="shadowProperties.html">Shadow Properties</a></li>
|
|
<li><a href="colorProperties.html">Color Properties</a></li>
|
|
<li><a href="boxModel.html">Box Model</a></li>
|
|
<li><a href="clipProperty.html">Clip Property</a></li>
|
|
<li><a href="backgroundPosition.html">Background Position</a></li>
|
|
<li><a href="textProperties.html">Text Properties</a></li>
|
|
<li><a href="opacityProperty.html">Opacity Property</a></li>
|
|
<li><a href="scrollProperty.html">Scroll Property</a></li>
|
|
<li><a href="textWrite.html">Text Write</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
|
|
</ul>
|
|
<ul id="share">
|
|
<li>
|
|
<a class="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">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="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">
|
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrap">
|
|
<h2 class="head-title">Transform Matrix</h2>
|
|
<p class="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>
|
|
</div>
|
|
|
|
<div class="featurettes dark">
|
|
<div class="content-wrap">
|
|
<div class="columns">
|
|
<div class="col3">
|
|
<h3 class="border text-right">Overview</h3>
|
|
<p class="condensed text-right">The brand new component to enable complex <b>transform</b> animations of the future.</p>
|
|
</div>
|
|
<div class="col9 border">
|
|
<p class="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 <a href="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 <a href="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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrap">
|
|
|
|
<h3>3D Transform</h3>
|
|
<ul>
|
|
<li><kbd class="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><kbd class="bg-indigo">translateX</kbd> function is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right.</li>
|
|
<li><kbd class="bg-indigo">translateY</kbd> function is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top.</li>
|
|
<li><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="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><kbd class="bg-blue">matrix</kbd> and <kbd class="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>
|
|
|
|
<pre><code class="language-javascript">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 } })
|
|
</code></pre>
|
|
|
|
<div id="matrix-examples" class="featurettes" style="perspective: 400px">
|
|
<div class="example-item example-box bg-indigo">MX1</div>
|
|
<div class="example-item example-box bg-olive">MX2</div>
|
|
<div class="example-item example-box bg-pink">MX3</div>
|
|
<div class="example-item example-box bg-red">MX4</div>
|
|
|
|
<div class="example-buttons">
|
|
<a class="btn btn-blue" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
<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 <a href="transformFunctions.html">other component</a> the Transform Matrix component will produce the same visual experience, but with the <code>matrix3d</code> function.</p>
|
|
<div id="chainedTweens" class="featurettes">
|
|
<div class="example-item example-box bg-gray" style="font-size: 30px">FROMTO</div>
|
|
<div class="example-item example-box bg-olive" style="font-size: 30px">FROMTO</div>
|
|
<div class="example-item example-box bg-gray" style="font-size: 30px">TO</div>
|
|
<div class="example-item example-box bg-indigo" style="font-size: 30px">TO</div>
|
|
|
|
<div class="example-buttons">
|
|
<a class="btn btn-blue" href="#">Start</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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 <a href="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 <a href="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>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="content-wrap">
|
|
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
|
<p>© 2015 - 2021 · <a href="https://github.com/thednp">thednp</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<!-- /.site-wrapper -->
|
|
|
|
<!-- JavaScript =============================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
<script src="./src/polyfill.min.js"></script>
|
|
<script src="./src/kute-extra.min.js"></script>
|
|
<script src="./assets/js/prism.js"></script>
|
|
|
|
<script src="./assets/js/transformMatrix.js"></script>
|
|
<script src="./assets/js/scripts.js"></script>
|
|
</body>
|
|
|
|
</html>
|