I posted this tweet while working on a project that involved heavy CSS3 animations. When creating simple animation that only impacts a small element, I found you could usually get away with a simple 2D based transform value.

/* translate(X,Y); */
-webkit-transform: translate(100px, 200px);
-moz-transform: translate(100px, 200px);
transform: translate(100px, 200px);

However, when moving large objects or moving many objects these 2D transforms just don’t cut it. The animations were choppy and sometimes crashed the browser. To smooth out these transforms I applied a 3D based transform.

/* translate3D(X,Y,Z); */
-webkit-transform: translate3D(100px, 200px, 0);
-moz-transform: translate3D(100px, 200px, 0);
transform: translate3D(100px, 200px, 0);

By implementing 3D based transforms, you’re able to take advantage of hardware acceleration. Unlike their ugly 2D cousins, 3D based transforms utilize your computer’s hardware, specifically the graphics card, to assist in the animation.

Reference Links

Some reference links that I found handy when digging a bit deeper into this issue and fix.

• W3C CSS3 Transform Functions
• Surfin’ Safari: 3D Transforms
• Having Fun with CSS Animations

My name is Ian McFarlan and I have been a web developer since 2003. I’ve mainly worked in client services and advertising but lately I have been getting my hands dirty with product development.

Work | About | Contact