Crossbrowser.transform is a project mainly written in JavaScript, it's free.
transform subset of crossbrowser.js
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:
$('el').transform('rotate(45deg) translate(30%)')
;$('el').rotate(45);
$('el').skew(45,45);
$('el').scale(2);
$('el').scale('50%');
$('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!]
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?!
Special thanks to Buriel Webwerx for their help with the website!