如何将jQuery的css 3dtransform属性添加到dom元素中？

Question

嗨我想优化动画与IOS的移动设备jQuery的。有一个我想要考虑的使用3d渲染引擎的已知问题！

现在我希望做一些变革是这样的：

$('.class').css({"-webkit-transform:":"translate3d(200px, 200px, 0px)"}); 

但是，这并不工作！没有添加CSS！

Answer 1

不知道代码的其余部分，你是否应用-webkit-transition？否则，效果几乎会立即发生。下面

工作正常，我（工作的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'}); 
    }); 

Answer 2

你有没有忘了添加

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

您必须添加preserve 3d also。

Answer 3

昨天我发现Transit，如果你不介意添加一个库，你会发现它更容易。