LESS-icon

GPU Hardware-Accelerated CSS LESS-mixin

The hardwareCSSAcceleration (updated: 19/09/2013 )

CSS3

CSS3

The use of translate3d pushes CSS animations into GPU acceleration. Even if you are just looking to do a basic 2D translation

The WebKit blog describes translate3d as

translate3d(x, y, z), translateZ(z)

Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage.

Source: webkit.org

1) CSS LESS-mixin

Copy and Paste this to your mixins.less project file

2) Including all vendors (Updated: Now including all major vendors)

Final result

Further information

ON TRANSLATE3D AND LAYER CREATION HACKS
Perspective Property


Want to chat about this @leolaneseltd

One Comment

  • angry birds tools commented on April 13, 2014 Reply

    This is very attention-grabbing, You’re a very professional blogger.
    I’ve joined your rss feed and sit up for in quest of more of our great post.

Leave a Reply to angry birds tools Cancel reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *