How to add css 3dtransform property with jquery to a dom element?

Problem

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!

Problem courtesy of: Jurudocs

Solution

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'});
    });
Solution courtesy of: Anthony Forloney

Discussion

Have you forgot to add

-webkit-transform-style: preserve-3d;  ??

You have to add preserve 3d also .

Discussion courtesy of: Suresh Atta

I discovered Transit yesterday, you might find it easier if you don't mind adding a library.

Discussion courtesy of: smykes

This recipe can be found in it's original form on Stack Over Flow.