Hassle free transforms for every browser! No dependencies. Super light (< 4KB).
Includes two classes:
Methods for rotating, skewing, scaling, and more.
Extends the DOM to make these available to every element.
Parse all stylesheets and silently correct any transforms it finds.
-
Include Mootools and CrossBrowser.Transform.js
<script src='Mootools.js'></script> <script src='CrossBrowser.Transform.js'></script> -
Create an instance of the class.
var transform = new CrossBrowser.Transform(); -
Fix stylesheets. stylesheets - (CSS selector): Stylesheet to fix. Optional, defaults to all except those with the class of 'non-crossbrowser'.
transform.parseStyles([stylesheets]); // Fixes <style type='text/css'> .turn { -moz-transform:rotate(135deg) translate(12px); -moz-transform-origin:50px 50px } </style> -
AND/OR Extend the DOM with methods described below. elements - (CSS selector). Elements to extend. Optional, defaults to all.
transform.extendDOM([elements]); $('myElement').rotate(45); // rotates element 45 degrees.
Elements are extended with the following methods:
- transform(style [, origin])
style - (string). CSS3 style containing any number of rules. Mozilla/W3C Syntax.
eg:$('el').transform('rotate(45deg) translate(30%)'); - rotate(angle [, origin])
angle - (number). Degrees the element should be turned clockwise.
eg:$('el').rotate(45); - skew(xAxis [, yAxis][, origin])
xAxis - (number). Degrees element should be skewed from its vertical axis.
yAxis - (number). Degrees skewed from horizontal axis. Defaults to 0.
eg:$('el').skew(45,45); - skewX(xAxisAngle [, origin])
- skewY(yAxisAngle [, origin])
- scale(width [, height][, origin])
width - (number). Scale applied to element's width.
height - (number). Scale applied to height. Defaults to width.
eg:$('el').scale(2); - scaleX(widthPercentage [, origin])
Height scale defaults to 0. - scaleY(heightPercentage [, origin])
- translate(left [, top][, origin])
left - (value). Distance element should be moved from left.
top - (value). Distance element should be moved from top. Defaults to 0.
eg:$('el').scale('50%'); - translateX(left [, origin])
- translateY(top [, origin])
- matrix(matrix [, origin])
matrix - (array). Matrix to be applied. Array must have 4-6 values, where elements are listed vertically:
a c e
b d f
eg:$('el').scale([1,0,0,1,1,0]);
All methods accept an optional argument:
origin - (array): An [x,y] coordinate to use as the elements origin.
eg: $('el').rotate(45, [50,50]);
There are other transforms such as reflection that may work, but no guarantees for now.
If you do not need to fix stylesheets, you can include and call the Transform class directly:
<script src='Compressed/transform.js'></script>
new Transform().extendDOM();
$('myElelement').rotate(45)...
The Transform was devised as part of the CrossBrowser.js project.
We aim to create a lightweight and easy method to fix stylesheets, and let developers focus on coding!!
Issues? Ideas? Wanna Join? [We need help!]
-
Open threads regarding the transform class on the CrossBrowser Google Group.
-
Watch the GitHUB page for updates.
-
Leave issues on the GitHUB Issue Tracker.
-
Check out the Mootools Forge Page.
- As I have no control over the state of the forge page, the info and downloads on this page may be out of date.
-
Or email us:
var name = "siteroller+CrossBrowser"; var company = "gmail.com"; var email = name + '@' + company; // There's gotta be a better way to keep spammers at bay, no?!
- -wontfix- External stylesheets are not parsed in Webkit and Opera.
They are in IE, which is good, because that is the main offender. :) - -wontfix- No support for older version of Firefox < 3.5 or IE9 Beta.
- -wontfix- Transformed elements in IE become positioned, and may lose text anti-aliasing.
- IE9 support will come as soon as you buy me a computer which supports it!
Special thanks to Buriel Webwerx for their help with the website!