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:
- 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.
- 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 ;
}
