The hardwareCSSAcceleration (updated: 19/09/2013 )
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.
1) CSS LESS-mixin
Copy and Paste this to your mixins.less project file
|
1 2 3 4 5 6 |
.hardwareCSSAcceleration() { transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } |
2) Including all vendors (Updated: Now including all major vendors)
|
1 2 3 4 5 6 7 8 9 10 |
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; perspective: 1000; |
Final result
Further information
ON TRANSLATE3D AND LAYER CREATION HACKS
Perspective Property
Want to chat about this @leolaneseltd
One Comment
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.