Take care to the order of transformations. Translate, Scale, Rotate. Chaining properties didn't work well. Instead, concatenate transform functions into one string.
$(node).css({'-webkit-transform': 'translate3d(tx, ty, tz) scale3d(sx, sy, sz)'});jQuery Animation Enhanced Plugin
_ http://playground.benbarnett.net/jquery-animate-enhanced/
The tricky part of this plugin is compromising
left, top property definitions with -webkit-transform: translate3d(x, y, x)Injecting CSS rules to
<head>. Neat trick but couldn't use._ http://stackoverflow.com/questions/1212500/jquery-create-css-rule-class-runtime
Webkit Blog Posts
_ http://webkit.org/blog/130/css-transforms/
_ http://webkit.org/blog/386/3d-transforms/
_ http://webkit.org/blog/138/css-animation/
_ http://webkit.org/blog/324/css-animation-2/
Comprehensive CSS3 Showcase
_ http://css3.bradshawenterprises.com/
W3C Specs
_ http://webkit.org/specs/CSSVisualEffects/
_ http://www.w3.org/Style/CSS/current-work
node.css({
'-webkit-transform': 'translate3d('+t_x+'px, '+t_y+'px, 0px) scale3d(0, 0, 0)',
'-webkit-transition-property': '-webkit-transform',
'-webkit-transition-duration': '0s',
'-webkit-transition-timing-function': 'ease'
});
setTimeout(function(){
node.css({
'-webkit-transform': 'translate3d('+t_x+'px, '+t_y+'px, 0px) scale3d('+scale+', '+scale+', 0)',
'-webkit-transition-duration': '1s'
});
}, 0);Scale flickering is less likely using
scale.toFixed(). The less decimal places, the less shitty.Animation Enhanced's
$.translation()Get x and y of elements when positioned by
translate3d(). Values are parsed from Webkit's -webkit-transform: matrix3d() property.