CSS3 animation, translate to position
I'm not an expert in CSS3 transforms, but I think translate
is relative to the element's original position.
One way I can see to achieve what you want with CSS would be to position the element absolutely, and use a CSS3 transition
to change its left
and top
properties.
Here is a Fiddle: 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');
});
});
The purpose of the JS is to add the move
class to the element when it is clicked.
Phill
Updated on June 14, 2022Comments
-
Phill almost 2 years
I have a div that I click on to drag it. Once it's on an area, it animates to its position via:
$("#wheel1").animate({left: "200px", top: "100px"});
I can also get it to animate with:
@-webkit-keyframes wheel1 { 0% { } 100% { -webkit-transform: translate(200px, 100px); } }
The difference being; with jQuery it animates to 200px from the left of the document. With CSS3, it animates 200px from where you drop it (which is bad)
Is there a way to make CSS3 animate from the top left of the document, as jQuery does? I've tried changing transform-origin and a few other settings with no luck.