You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<divclass="tab-pane fade show active" id="installation" role="tabpanel" aria-labelledby="installation-tab">
179
+
<h1>NO LONGER MAINTAINED</h1>
180
+
<p>As a note, I'm no longer maintaining this library. There was a much simpler library by Louis Remi. I forked it a while back and ported over the portions of my library that were missing from his. Louis' approach is much simpler and more performant.</p>
181
+
<p>My fork is <ahref="https://github.com/heygrady/jquery.transform.js">here</a></p>
182
+
<p>Louis Remi's is <ahref="https://github.com/louisremi/jquery.transform.js">here</a></p>
183
+
<h1>2D Transformations</h1>
184
+
<p>This library uses native CSS3 transformations in supported browsers and relies on the matrix filter in Internet Explorer 8 and below.</p>
185
+
<p>NOTE: In Internet Explorer 8 and below, the transform-origin and the translate functions are simulated using relative positioning. Because of this, in Internet Explorer 8 and below, the top and left position of an element will be incorrect after it has been transformed. The <ahref="https://github.com/heygrady/transform/issues#issue/6">solution</a> is to wrap the element that is to be transformed and position that wrapper instead.</p>
186
+
<ul>
187
+
<li>Since 0.9.0, proper units are required</li>
188
+
<li>Since 0.9.0, jQuery 1.4.3 or above is required</li>
189
+
</ul>
190
+
<h2>Supported Browsers</h2>
191
+
<ul>
192
+
<li>Native CSS3 Support
193
+
<ul>
194
+
<li>FireFox 3.5+</li>
195
+
<li>Safari 3.1+</li>
196
+
<li>Chrome</li>
197
+
<li>Opera 10.5+</li>
198
+
<li>Internet Explorer 9+</li>
199
+
</ul></li>
200
+
<li>Matrix Filter Support
201
+
<ul>
202
+
<li>Internet Explorer 5.5 - 8</li>
203
+
</ul></li>
204
+
</ul>
205
+
<h2>Usage</h2>
206
+
<pre><code>// Rotate 30 Degrees
207
+
$('#example').transform({rotate: '30deg'});
208
+
209
+
// Use CSS Hooks to Rotate
210
+
$('#example').css({rotate: '30deg'});
211
+
212
+
// Animate the rotation
213
+
$('#example').animate({rotate: '30deg'});
214
+
215
+
// Go Crazy
216
+
$('#example').transform({
217
+
matrix: [1, 0, 0, 1, 0, 0], //applies a matrix
218
+
reflect: true, //same as rotate(180deg)
219
+
reflectX: true, //mirrored upside down
220
+
reflectXY: true, //same as reflectX + rotate(-90deg)
221
+
reflectY: true, //mirrored
222
+
rotate: '45deg', //rotates 45 degrees
223
+
skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
224
+
skewX: '10deg', //skews 10 degrees on the x axis
225
+
skewY: '10deg', //skews 10 degrees on the y axis
226
+
scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
227
+
scaleX: 1.5, //scales by 1.5 on the x axis
228
+
scaleY: 1.5, //scales by 1.5 on the y axis
229
+
translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
230
+
translateX: 20px', //moves the transformation 20px on the x axis
231
+
translateY: '20px', //moves the transformation 20px on the y axis
232
+
origin: ['20%', '20%'] //changes the transformation origin
233
+
});
234
+
235
+
// Properties can be strings or arrays
236
+
$('#example').css({skew: ['10deg', '10deg']});
237
+
$('#example').css({skew: '10deg, 10deg'});
238
+
239
+
// For animation, arrays should be nested because of jQuery's per-property easing support
240
+
$('#example').animate({skew: ['10deg', '10deg']}); // technically this defines nonsense easing of 10deg
241
+
$('#example').animate({skew: [['10deg', '10deg']]}); // this is a friendlier way of supporting this</code></pre>
0 commit comments