如何將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，如果你不介意添加一個庫，你會發現它更容易。