如何将带有 jquery 的 css 3d 转换属性添加到 dom 元素？答案

【问题标题】：How to add css 3dtransform property with jquery to a dom element?如何将带有 jquery 的 css 3d 转换属性添加到 dom 元素？
【发布时间】：2013-03-20 14:24:43
【问题描述】：

您好，我正在尝试使用 jquery 为 IOS 移动设备优化动画。我想考虑使用 3d 渲染引擎的这个已知问题！

现在我想做一些这样的转换：

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

但这不起作用！没有添加 css！

【问题讨论】：

标签： jquery css

【解决方案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'});
    });

【讨论】：

【解决方案2】：

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

【讨论】：

对于大多数我认为你必须使用 .animate 的东西。

【解决方案3】：

你忘记添加了吗

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

您必须添加preserve 3d also。

【讨论】：

对不起.. :(没有线索。在我的情况下，我忘记了，搜索了一半谷歌:)