How do you accelerate CSS? Enabling 3D video rendering!

A very easy way to leverage the client’s graphic card 3D capabilities is by using CSS’s transform rule.

This rule needs all 3 axis to work and such a task is automatically demanded to your video card. In a certain way you are tricking it to work in 3D mode so you will notice faster loading times and the overall feel of your DOM a lot more fluid.

There are 2 caveats with this practice that’s better knowing in advance:

  1. If you have pre-existing transform rules on the same DOM elements these might interfere: a common example regards sidebar hamburger menus or animations where content is moved or translated with translate3D rules.
  2. Enabling this rule on nested elements will result in it being applied multiple times which is counter productive.

So, let’s get to business and cresate a class that you can load in your stylesheet and recall on any element which you want to speed up:

.enable-3d-acceleration {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
}

Technically you could use translateZ and that-s it, all the other rules have been put there just to be more browser compatible, for older versions mainly.

If you want to render everything with a little transition candy in between you can add transitions to your previous  rule and it becomes like this:

.enable-3d-acceleration {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
       -moz-transition: all 1s;
       -webkit-transition: all 1s;
       -o-transition: all 1s;
       transition: all 1s ;
}

That’s It!