zachstronaut / jquery-animate-css-rotate-scale Goto Github PK
View Code? Open in Web Editor NEWA monkey patch for jQuery 1.3.1+ that adds support for setting or animating CSS scale and rotation independently.
A monkey patch for jQuery 1.3.1+ that adds support for setting or animating CSS scale and rotation independently.
----------------------------- READ ME ----------------------------- jquery-animate-css-rotate-scale Zachary Johnson www.zachstronaut.com This monkey patch for jQuery 1.3.1+ allows you to: 1. Get and set rotate and scale CSS transforms independently with the added custom jQuery methods rotate() and scale(). Examples: $('#example').rotate('30deg'); $('#example').scale(1.5); $('#example').rotate('45deg'); $('#example').scale(1.5).rotate('45deg'); // chaining $('#example').rotate(); // returns '45deg' $('#example').scale(); // returns '1.5' 2. Animate rotate and scale CSS transforms independently using jQuery's animate() method. Examples: $('#example').animate({rotate: '30deg', scale: '1.25'}, 1000); $('#example').animate({rotate: '+=30deg', scale: '-=0.1'}, 1000); Browser Support --------------- The CSS3 transform property (and therefore this patch) currently functions in Safari/Chrome/Webkit, Firefox 3.5+, IE 9+, and Opera 11+. Using This Patch ---------------- Load jquery-animate-css-rotate-scale.js after loading jQuery and jquery-css-transform.js. For example: <script src="jquery.js" type="text/javascript"></script> <script src="jquery-css-transform.js" type="text/javascript"></script> <script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script> For more information visit: http://www.zachstronaut.com/ This code is currently available for use in all personal or commercial projects under both MIT and GPL licenses, just like jQuery. ----------------------------- Change Log ----------------------------- 2012.10.23 - Firefox 16 transform style returns a matrix rather than a string of transform functions. This broke the features of this jQuery patch in Firefox 16. It should be possible to parse the matrix for both scale and rotate (especially when scale is the same for both the X and Y axis), however the matrix does have disadvantages such as using its own units and also 45deg being indistinguishable from 45+360deg. To get around these issues, this patch tracks internally the scale, rotation, and rotation units for any elements that are .scale()'ed, .rotate()'ed, or animated. The major consequences of this are that 1. the scaled/rotated element will blow away any other transform rules applied to the same element (such as skew or translate), and 2. the scaled/rotated element is unaware of any preset scale or rotation initally set by page CSS rules. You will have to explicitly set the starting scale/rotation value. 2010.11.26 - Updated included dependency jquery-css-transform.js to newest version 2010.11.06 - Fixed chaining of scale() and rotate() by returning "this" 2009.07.15 - Added to GitHub
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.