When Webkit uses hardware-accelerated animations on elements containing text, the text is rendered to an image in order to animate more efficiently. (I believe this is the cause, but the only evidence I have is cursory Googling.) You can see the difference in 2d and 3d in this fiddle.

For this reason, it'd be nice to be able to force an animation to 2d, even in 3d-supporting browsers. One example is 3d-animating an element, and binding the transition's end to switch to a 2d transform. I've hacked this together in a way that's not worthy of a pull request, which you can see in this gist.

Essentially, it's another CSS hook for use3d that defaults to true. Unfortunately, it's cached, so if you declare it false once, you need to declare it true elsewhere. And you need to declare it as the first property in the list. So yeah, my implementation sucks, but I'd love to hear your thoughts on this feature.

transformJS turn element in a wrong way with rotateZ (except with ie filter polyfill (!))

natural css transform rotateZ direction is ↻ (clockwise)
transformJS rotateZ is ↺ (anticlockwise)
transfomrJS with filter polyfill (ie 6-8) is ↻ (clockwise)

I've tried it myself, and provided position: absolute as you recommend. It doesn't work.

If you look at the sample on http://transformjs.strobeapp.com/ the translation doesn't work in IE either.

I'd love to use this library, but I need translate to work in IE9.

Currently, prefixes for the transform-property are defined as prefixes = [ "Moz", "Webkit", "O", "MS" ]
This is not correct, since javascript is case-sensitive. The correct values are prefixes = [ "Moz", "webkit", "O", "ms" ].

Edit: Sorry, I ended up posting the issue twice. See #4 for the actual issue + pull request.

doubleTap: function(evt, index) { console.log(evt.scaleX); console.log("double") }, 显示 evt.scaleX 未定义

The inline code (as of beta2) says: "jQuery 1.4.3+ is needed for this plugin to work"

However it does not work with 1.5.0 (in Firefox 11 or Chromium 17)
Lots of: Warning: Error in parsing value for '-moz-transform'. Declaration dropped.
The web site demo uses 1.6.2 and that works for me.

I tested and it works with all of 1.6.2, 1.6.1, 1.6, 1.5.2 and 1.5.1
(also, going forward, with 1.6.3, 1.6.4, 1.7, 1.7.1, 1.7.2)
It fails with 1.5.0, 1.4.4 and 1.4.3.

P.S. The 1.5.1 release notes are here, in case someone wants to work out why:
http://blog.jquery.com/2011/02/24/jquery-151-released/

it would be nice to support this syntax:

$("div").css({ translateX: "10%"})

Hi!
on animation and zoom of images all images get unsharp in Safari, Chrome, IE (all newest version) only in Firefox images get sharp.

Currently, the 2d-matrix is built by the following code:

  if (supports2d) {
    s  = "matrix(";
      s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + ",";
      s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + ",";
      s += tM.e(3,1).toFixed(10) + "px," + tM.e(3,2).toFixed(10)+'px';
    s += ")";        
  }

This is not absolutely correct, since the suffix "px" in two last attributes is only supported by firefox (property MozTransform). All other browsers are expecting a matrix without any unit, ignoring any matrix that is built with a unit inside.
The corrected code (for other browsers only):

  if (supports2d) {
    s  = "matrix(";
      s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + ",";
      s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + ",";
      s += tM.e(3,1).toFixed(10) + "," + tM.e(3,2).toFixed(10);
    s += ")";  
  }

There is no "main" field to start at and no "script" field to run the rake build step, so installation requires manual intervention.

http://transformjs.strobeapp.com/ gives a 503.

It's great that you use the filter for backwards compatibility with IE8 and lower, but since IE9 supports css transforms, it would be great if this library used them on that browser.

Hi. I'd like scale inward, basically a rectangle shrinking while maintaining it's centering. It scales by the top left corner currently. Do I need to do something like negative margins in a wrapping container div to get around this?

Love the library,
Francois

Firefox implemented the matrix function against the spec, which requires a <number> rather than a <length>. [1] For this reason TransformJS doesn't work in Opera (which implemented according to spec), or probably other browsers that have implemented the spec ( for example, tell the script that Chrome doesn't have 3D and it breaks on 2D).

Perhaps the approach in https://github.com/sproutcore/TransformJS/blob/master/lib/css_hooks.js#L40 could be switched so the translationUnit only gets added for Firefox? Thoughts?

[1] http://lists.w3.org/Archives/Public/www-style/2009Oct/0360.html

I've written a pair of functions that rotate a div back and forth around its center point:

 function graphic_rotate_cw() {
    jQuery("#bg-circles").animate( {
        rotateZ: '+='+.15
    },4000,function(){graphic_rotate_ccw();});
 }

function graphic_rotate_ccw() {
    jQuery("#bg-circles").animate( {
        rotateZ: '-='+.15
    },4000,function(){graphic_rotate_cw();});
}

They work exactly as expected in FF, Chrome and Safari. But in IE7-9, the image rotates around its lower-left corner instead.

TransformJS' package.json specifies sproutcore-touch.js as an output file. I think this is for the included demo.

As a result, though, if you use the TransformJS bpm package in another project, you will end up with sproutcore-touch.js being output to your assets directory, even if your project doesn't use it.

translateX moves on the Y axis
and translateY moves on the X axis

Webkit's transform3d seems to animate at a higher fps than matrix3d (at least in Safari). Would it be possible to have transform.js utilize transform3d?

Hi guys,

Which variant of the final image state is right?

Chrome 13: http://dl.dropbox.com/u/2573685/tranformjs-chrome.jpg
Firefox 6: http://dl.dropbox.com/u/2573685/tranformjs-ff.jpg

Thanks.