Hi I'm trying to optimize animations with jquery for IOS mobile devices. There is this known issue of using the 3d-rendering engine which i want to take into account!
Now i want to do some transformations like this:
$('.class').css({"-webkit-transform:":"translate3d(200px, 200px, 0px)"});
But this doesn't work! No css is added!
Without knowing the rest of your code, did you apply a -webkit-transition? Otherwise the effect would happen almost immediately.
The below works fine for me (working jsfiddle -> http://jsfiddle.net/RQzn6/)
HTML
<div id="container">
<div id="box">Hello</div>
</div>
CSS
#container {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 100px;
}
#box {
width: 200px;
height: 100px;
background-color: gray;
}
jQuery
$("#box").click(function() {
$(this).css({'-webkit-transform':'translate3d(200px, 200px, 0px)',
'-webkit-transition': 'all 1s ease-out'});
});
