Permalink
Browse files

ironed out all of the IE bugs. IE now transforms exactly as Moz, incl…

…uding respecting transform-origin.
  • Loading branch information...
unknown
unknown committed May 17, 2010
1 parent d8ebb2b commit 4cd7bf2386572b4a66d0dff816ca0cfecb4fdf4a
Showing with 198 additions and 182 deletions.
  1. +22 −14 animate.html
  2. +13 −3 css/transform.css
  3. +163 −165 lib/transform.js
View
@@ -34,6 +34,7 @@ <h3>Forced top, left origin</h3>
</aside>
<section class="main">
<div class="line">
+ <ul id="ie-barf"></ul>
<div class="unit size1of2">
<form id="transform" name="transform" action="">
<div class="line">
@@ -127,21 +128,28 @@ <h3>Forced top, left origin</h3>
<script src="lib/sylvester-0.1.3.min.js"></script>
<script src="lib/transform.js"></script>
<script type="text/javascript">
- var thing = $('.transform').transform();
+ $('#target2').transform({origin: [0, 0]});
+ var thing = $('.transform');
+ var i = 0;
thing.click(function() {
- $(this).animate({
- skew: '+=180deg +=180', //you don't have to use units
- skewX: '+=5',
- skewY: '+=5',
- rotate: '+=360deg',
- scale: '+=.1 +=.1',
- scaleX: '+=.05',
- scaleY: '+=.05',
- translate: '+=10px -=10px',
- translateX: '-=1',
- translateY: '-=1'
- }, 1500);
- }).mouseenter(shake);
+ var $el = $(this);
+ $el.animate({rotate: '+=11.25deg'});
+ });
+
+ $(document).keydown(function(e) {
+ var prop = {};
+ var pos = thing.position();
+ switch (e.which) {
+ case 40: prop.top = (pos.top + 1) + 'px';break;
+ case 38: prop.top = (pos.top - 1) + 'px';break;
+ case 39: prop.left = (pos.left + 1) + 'px';break;
+ case 37: prop.left = (pos.left - 1) + 'px';break;
+ }
+ if (!$.isEmptyObject(prop)) {
+ e.preventDefault();
+ thing.css(prop);
+ }
+ });
function shake() {
var thing = $(this);
View
@@ -2,6 +2,16 @@ textarea {
width: 100%;
height: 10em;
}
+section table th,
+section table td {
+ padding: 3px;
+ border-left: none;
+ border-right: none;
+}
+.right-col {
+ background-repeat: no-repeat;
+ background-position: 23px 58px;
+}
.holder {
position: relative;
overflow: visible;
@@ -21,8 +31,8 @@ textarea {
}
.transform-ie {
- -moz-transform-origin: top left;
+ /*-moz-transform-origin: top left;
-webkit-transform-origin: top left;
- -o-transform-origin: top left;
- position: absolute;
+ -o-transform-origin: top left;*/
+ position: relative;
}
Oops, something went wrong.

0 comments on commit 4cd7bf2

Please sign in to comment.