Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 58 lines (46 sloc) 2.399 kB
53c20bd @heygrady
authored
1 # 2D Transformations
2 This library uses native CSS3 transformations in supported browsers and relies on teh matrix filter in Internet Explorer 8 and below.
3
4 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 [solution](https://github.com/heygrady/transform/issues#issue/6) is to wrap the element that is to be transformed and position that wrapper instead.
5
339c674 @heygrady
authored
6 * Since 0.9.0, proper units are required
7 * Since 0.9.0, jQuery 1.4.3 or above is required
8
53c20bd @heygrady
authored
9 ## Supported Browsers
10 * Native CSS3 Support
11 * FireFox 3.5+
12 * Safari 3.1+
13 * Chrome
14 * Opera 10.5+
15 * Internet Explorer 9+
16 * Matrix Filter Support
17 * Internet Explorer 5.5 - 8
18
19 ## Usage
20 // Rotate 30 Degrees
21 $('#example').transform({rotate: '30deg'});
22
23 // Use CSS Hooks to Rotate
24 $('#example').css({rotate: '30deg'});
25
26 // Animate the rotation
27 $('#example').animate({rotate: '30deg'});
28
29 // Go Crazy
30 $('#example').transform({
31 matrix: [1, 0, 0, 1, 0, 0], //applies a matrix
32 reflect: true, //same as rotate(180deg)
33 reflectX: true, //mirrored upside down
34 reflectXY: true, //same as reflectX + rotate(-90deg)
35 reflectY: true, //mirrored
36 rotate: true, //rotates 45 degrees
37 skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
38 skewX: '10deg', //skews 10 degrees on the x axis
39 skewY: '10deg', //skews 10 degrees on the y axis
40 scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
41 scaleX: 1.5, //scales by 1.5 on the x axis
42 scaleY: 1.5, //scales by 1.5 on the y axis
43 translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
44 translateX: 20px', //moves the transformation 20px on the x axis
45 translateY: '20px', //moves the transformation 20px on the y axis
46 origin: ['20%', '20%'] //changes the transformation origin
47 });
48
49 // Properties can be strings or arrays
50 $('#example').css({skew: ['10deg', '10deg']});
51 $('#example').css({skew: '10deg, 10deg'});
52
53 // For animation, arrays should be nested because of jQuery's per-property easing support
54 $('#example').animate({skew: ['10deg', '10deg']}); // technically this defines nonsense easing of 10deg
55 $('#example').animate({skew: [['10deg', '10deg']]}); // this is a friendlier way of supporting this
56
57
58
Something went wrong with that request. Please try again.