Alexander Solonik
Alexander Solonik

Reputation: 10250

understanding use of translateZ for 3d accelaration

i was just going through the source of odoeter.js and came across the following line of code ::

        <!-- Force 3d acceleration always and forever :) -->
        <div style="-webkit-transform: translateZ(0)"></div>

what is this for ? i don't quite understand .

I am refering to this page of odometer.js .

can somebody explain this with a simple example ?

Thank you.

Alexander.

Upvotes: 0

Views: 73

Answers (1)

baao
baao

Reputation: 73251

By using translateZ (or another 3d animation) you are enabling hardware acceleration for your animations, even if it's a fake 3d animation like 0, as it doesn't do anything but enabling HA. HA will improve the animations smoothness. If you are planing to use javascript for animations, I'd have a look at velocity.js which outscores jQuery's animate() by far. Have a look here for comparisons.

To further improve the animations speed, make sure to add

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;

To your animated elements.

Upvotes: 1

Related Questions