Skip to content
Browse files

Major re-org of the code to make it more jQuery-ish. Separated out th…

…e transform, animate and matrix functions.
  • Loading branch information...
1 parent 1363509 commit 9671fe0118175cccb45ebcf063e0ef8521d5ad60 @heygrady committed
Showing with 1,205 additions and 1,255 deletions.
  1. +1,065 −1,116 lib/jquery.transform.js
  2. +140 −139 transform.html
View
2,181 lib/jquery.transform.js
1,065 additions, 1,116 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
279 transform.html
@@ -1,139 +1,140 @@
-<!DOCTYPE html SYSTEM "about:legacy-compat">
-<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <meta charset="utf-8">
- <title>CSS3 Transform Matrix Calculator</title>
- <meta name="keywords" content="css3, transform, matrix, rotate, internet explorer">
- <meta name="description" content="Calculate the correct matrix for Internet Explorer and browsers that support the CSS3 Transform property.">
-
- <script src="lib/modernizr-1.1.min.js"></script>
- <link rel="stylesheet" href="css/global.css" />
- <link rel="stylesheet" href="css/transform.css" />
- </head>
- <body>
- <section class="page">
- <header class="head" role="banner">
- <hgroup>
- <h1>CSS3 Transform Matrix Calculator</h1>
- <h2>Create transformations in all browsers</h2>
- </hgroup>
- </header>
- <article class="body" role="main">
- <aside class="right-col">
- <h3>Default Origin (Center)</h3>
- <div class="holder">
- <div id="target" class="transform">I've got an origin in my center.</div>
- </div>
- <hr />
- <h3>Top Left Origin</h3>
- <div class="holder">
- <div id="target2" class="transform">I transform around my top left corner.</div>
- </div>
- </aside>
- <section class="main">
- <div class="line">
- <div class="unit size1of2">
- <form id="transform" name="transform" action="">
- <div class="line">
- <label for="rotate" class="unit size1of4">Rotate:</label>
- <div class="unit size3of4 lastUnit">
- <input id="rotate" name="rotate" type="text" class="text" />&deg;
- </div>
- </div>
- <div class="line">
- <label for="scale-x" class="unit size1of4">Scale:</label>
- <div class="unit size3of4 lastUnit">
- <input id="scale-x" name="scale-x" type="text" class="text size1of4" />x
- <input id="scale-y" name="scale-y" type="text" class="text size1of4" />y
- </div>
- </div>
- <div class="line">
- <label for="scaleX" class="unit size1of4">Scale X:</label>
- <div class="unit size3of4 lastUnit">
- <input id="scaleX" name="scaleX" type="text" class="text" />
- </div>
- </div>
- <div class="line">
- <label for="scaleY" class="unit size1of4">Scale Y:</label>
- <div class="unit size3of4 lastUnit">
- <input id="scaleY" name="scaleY" type="text" class="text" />
- </div>
- </div>
- <div class="line">
- <label for="skew-x" class="unit size1of4">Skew:</label>
- <div class="unit size3of4 lastUnit">
- <input id="skew-x" name="skew-x" type="text" class="text size1of4" />x&deg;
- <input id="skew-y" name="skew-y" type="text" class="text size1of4" />y&deg;
- </div>
- </div>
- <div class="line">
- <label for="skewX" class="unit size1of4">Skew X:</label>
- <div class="unit size3of4 lastUnit">
- <input id="skewX" name="skewX" type="text" class="text" />&deg;
- </div>
- </div>
- <div class="line">
- <label for="skewY" class="unit size1of4">Skew Y:</label>
- <div class="unit size3of4 lastUnit">
- <input id="skewY" name="skewY" type="text" class="text" />&deg;
- </div>
- </div>
- <div class="line">
- <label for="translate-x" class="unit size1of4">Translate:</label>
- <div class="unit size3of4 lastUnit">
- <input id="translate-x" name="translate-x" type="text" class="text size1of4" />x
- <input id="translate-y" name="translate-y" type="text" class="text size1of4" />y
- </div>
- </div>
- <div class="line">
- <label for="translateX" class="unit size1of4">Translate X:</label>
- <div class="unit size3of4 lastUnit">
- <input id="translateX" name="translateX" type="text" class="text" />px
- </div>
- </div>
- <div class="line">
- <label for="translateY" class="unit size1of4">Translate Y:</label>
- <div class="unit size3of4 lastUnit">
- <input id="translateY" name="translateY" type="text" class="text" />px
- </div>
- </div>
- <div class="line">
- <label for="origin-x" class="unit size1of4">Origin:</label>
- <div class="unit size3of4 lastUnit">
- <input id="origin-x" name="origin-x" type="text" class="text size1of4" />x%
- <input id="origin-y" name="origin-y" type="text" class="text size1of4" />y%
- </div>
- </div>
- <div class="line">
- <div class="unit size1of4">&nbsp;</div>
- <div class="unit size3of4 lastUnit">
- <label for="animate"><input id="animate" name="animate" type="checkbox" class="checkbox" value="1" /> Animate?</label>
- </div>
- </div>
- <button id="go">Go!</button>
- </form>
- </div>
- </div>
- </section>
- </article>
- <footer class="foot" role="contentinfo">
- </footer>
- </section>
-
- <!-- JavaScrpt -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
- <script src="lib/sylvester-0.1.3.min.js"></script>
- <script src="lib/jquery.transform.js"></script>
- <script src="lib/form.js"></script>
- <script type="text/javascript">
- $('#target2').transform({origin: [0, 0]});
- var thing = $('.transform');
- var i = 0;
- thing.click(function() {
- $(this).animate({rotate: '+=45deg'});
- });
- </script>
- </body>
-</html>
+<!DOCTYPE html SYSTEM "about:legacy-compat">
+<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ <meta charset="utf-8">
+ <title>CSS3 Transform Matrix Calculator</title>
+ <meta name="keywords" content="css3, transform, matrix, rotate, internet explorer">
+ <meta name="description" content="Calculate the correct matrix for Internet Explorer and browsers that support the CSS3 Transform property.">
+
+ <script src="lib/modernizr-1.1.min.js"></script>
+ <link rel="stylesheet" href="css/global.css" />
+ <link rel="stylesheet" href="css/transform.css" />
+ </head>
+ <body>
+ <section class="page">
+ <header class="head" role="banner">
+ <hgroup>
+ <h1>CSS3 Transform Matrix Calculator</h1>
+ <h2>Create transformations in all browsers</h2>
+ </hgroup>
+ </header>
+ <article class="body" role="main">
+ <aside class="right-col">
+ <h3>Default Origin (Center)</h3>
+ <div class="holder">
+ <div id="target" class="transform">I've got an origin in my center.</div>
+ </div>
+ <hr />
+ <h3>Top Left Origin</h3>
+ <div class="holder">
+ <div id="target2" class="transform">I transform around my top left corner.</div>
+ </div>
+ </aside>
+ <section class="main">
+ <div class="line">
+ <div class="unit size1of2">
+ <form id="transform" name="transform" action="">
+ <div class="line">
+ <label for="rotate" class="unit size1of4">Rotate:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="rotate" name="rotate" type="text" class="text" />&deg;
+ </div>
+ </div>
+ <div class="line">
+ <label for="scale-x" class="unit size1of4">Scale:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="scale-x" name="scale-x" type="text" class="text size1of4" />x
+ <input id="scale-y" name="scale-y" type="text" class="text size1of4" />y
+ </div>
+ </div>
+ <div class="line">
+ <label for="scaleX" class="unit size1of4">Scale X:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="scaleX" name="scaleX" type="text" class="text" />
+ </div>
+ </div>
+ <div class="line">
+ <label for="scaleY" class="unit size1of4">Scale Y:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="scaleY" name="scaleY" type="text" class="text" />
+ </div>
+ </div>
+ <div class="line">
+ <label for="skew-x" class="unit size1of4">Skew:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="skew-x" name="skew-x" type="text" class="text size1of4" />x&deg;
+ <input id="skew-y" name="skew-y" type="text" class="text size1of4" />y&deg;
+ </div>
+ </div>
+ <div class="line">
+ <label for="skewX" class="unit size1of4">Skew X:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="skewX" name="skewX" type="text" class="text" />&deg;
+ </div>
+ </div>
+ <div class="line">
+ <label for="skewY" class="unit size1of4">Skew Y:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="skewY" name="skewY" type="text" class="text" />&deg;
+ </div>
+ </div>
+ <div class="line">
+ <label for="translate-x" class="unit size1of4">Translate:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="translate-x" name="translate-x" type="text" class="text size1of4" />x
+ <input id="translate-y" name="translate-y" type="text" class="text size1of4" />y
+ </div>
+ </div>
+ <div class="line">
+ <label for="translateX" class="unit size1of4">Translate X:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="translateX" name="translateX" type="text" class="text" />px
+ </div>
+ </div>
+ <div class="line">
+ <label for="translateY" class="unit size1of4">Translate Y:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="translateY" name="translateY" type="text" class="text" />px
+ </div>
+ </div>
+ <div class="line">
+ <label for="origin-x" class="unit size1of4">Origin:</label>
+ <div class="unit size3of4 lastUnit">
+ <input id="origin-x" name="origin-x" type="text" class="text size1of4" />x%
+ <input id="origin-y" name="origin-y" type="text" class="text size1of4" />y%
+ </div>
+ </div>
+ <div class="line">
+ <div class="unit size1of4">&nbsp;</div>
+ <div class="unit size3of4 lastUnit">
+ <label for="animate"><input id="animate" name="animate" type="checkbox" class="checkbox" value="1" /> Animate?</label>
+ </div>
+ </div>
+ <button id="go">Go!</button>
+ </form>
+ </div>
+ </div>
+ </section>
+ </article>
+ <footer class="foot" role="contentinfo">
+ </footer>
+ </section>
+
+ <!-- JavaScrpt -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
+ <script src="lib/sylvester-0.1.3.min.js"></script>
+ <script src="lib/jquery.transform.js"></script>
+ <script src="lib/form.js"></script>
+ <script type="text/javascript">
+ $('#target2').transform({skewX: 45, origin: [0, 0]}, {forceMatrix: true});
+
+ var thing = $('.transform');
+ var i = 0;
+ thing.click(function() {
+ $(this).animate({rotate: '+=45deg'});
+ });
+ </script>
+ </body>
+</html>

0 comments on commit 9671fe0

Please sign in to comment.
Something went wrong with that request. Please try again.