-
Notifications
You must be signed in to change notification settings - Fork 173
/
Copy pathtransformMatrix.html
214 lines (191 loc) · 17.6 KB
/
transformMatrix.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!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 - 2022 · <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>