我有一个div,我点击它拖动它.一旦它出现在某个区域,它就会通过以下方式激活其位置：
$("#wheel1").animate({left: "200px",top: "100px"});
我也可以用它来制作动画：
@-webkit-keyframes wheel1 {
0% {
}
100% {
-webkit-transform: translate(200px,100px);
}
}
不同之处在于;使用jQuery,它从文档左侧动画到200px.使用CSS3,它可以从放置它的地方动画200px(这很糟糕)
有没有办法从文档的左上角制作CSS3动画,就像jQuery一样？我试过改变变换原点和其他一些设置而没有运气.
解决方法
我不是CSS3变换的专家,但我认为翻译与元素的原始位置有关.
我可以看到用CSS实现你想要的一种方法是绝对定位元素,并使用CSS3过渡来改变它的左边和顶部属性.
这是一个小提琴：http://jsfiddle.net/nSa9s/2/
HTML：
<div class="Box"></div>
CSS：
.Box { position: absolute; background: #ff0000; left: 400px; top: 200px; width: 100px; height: 100px; -webkit-transition: all 1.0s linear; -moz-transition: all 1.0s linear; -o-transition: all 1.0s linear; -ms-transition: all 1.0s linear; transition: all 1.0s linear; } .Box.move { left: 200px; top: 100px; }
jQuery的：
$(document).ready(function() {
$('.Box').on('click',function() {
$(this).addClass('move');
});
});
JS的目的是在单击元素时将move类添加到元素中.
