Last Updated: February 25, 2016
· rachelnabors
150 twitter

Use 3D CSS transforms to take advantage of hardware acceleration

At least in Safari, 3D transforms take advantage of hardware acceleration and can do the same transformations as their 2D counterparts.

For instance, use

transform: rotate3d( 0, 0, 0, 45deg );

instead of

transform: rotate( 45deg );

Both rotate the same thing along the same two dimensions.

This could be super useful if you're targeting a Safari-bound audience, like iOS users, but keep the words of Thomas Fuchs in mind:

In essence, any transform that has a 3D operation as one of its functions will trigger hardware compositing, even when the actual transform is 2D, or not doing anything at all (such as translate3d(0,0,0)). Note this is just current behaviour, and could change in the future (which is why we don’t document or encourage it). But it is very helpful in some situations and can significantly improve redraw performance.

Source (and excellent reading): http://desandro.github.com/3dtransforms/docs/3d-transform-functions.html

Say Thanks