您好,我正在尝试使用 jquery 为 IOS 移动设备优化动画。我想考虑使用 3d 渲染引擎的这个已知问题!
现在我想做一些像这样的转换:
$('.class').css({"-webkit-transform:":"translate3d(200px, 200px, 0px)"});
但这行不通!没有添加 css!
最佳答案
在不知道其余代码的情况下,您是否应用了 -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'});
});
关于jquery - 如何使用 jquery 将 css 3d 转换属性添加到 dom 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15526262/