How to use hardware accelerated CSS3 3D Transitions on iPad and iPhone
CSS3 3D Transforms
CSS3 transforms allow the rendering of an HTML element to be modified using 2D and 3D transformations such as rotation, scaling, and translations. Transforms are applied by setting the -webkit-transform CSS property with the desired list of transforms. Each transform takes the form of a transformation function, such as translate3d
or rotate, and a list of parameters enclosed in brackets. For example, to move an object to the right by 100 pixels and rotate it by 45 degrees you can use the
-webkit-transform
property:
-webkit-transform: translate(100px, 0) rotate(45deg);
Use translate3d, not translate
When using -webkit-transform, be sure to use the
translate3d(x,y,z)syntax, instead of using translate(x,y)
. For some reason, the latter is not hard-accelerated, at least not on iPhone OS 3.x (it seems to work fine on desktop Safari, tho).
Using -webkit-transform as the transition property when moving an element is advantageous relative to using the standard top and left properties because transitions using -webkit-transform are hardware-accelerated in Safari. An exception here is that it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated translate3d(x, y, 0) transform instead of a non-hardware accelerated translate(x, y) transform.
Terminology
There are a few terms here that begin with ‘trans,’ and they can easily be confused if you are not familiar with them. Here they are again:
- Transition: An implicit animation of CSS properties between an initial and a final value.
- Transform: A modification to the appearance of an HTML element by manipulating it in a 2D or 3D space.
- Translation: A particular type of transformation that moves the HTML element in 2D or 3D space.
Source: Google Code
Hi,
To rotate a marker in google maps I tried
$(‘img[src="./static/map/Kompass_1.png"]‘).parent().css({
‘-webkit-transform’:'rotate(‘ + ni + ‘deg)’,
‘-moz-transform’:'rotate(‘ + ni + ‘deg)’
});
It works fine in safari, but not in mobile safari.
Any ideas?