JQuery set rotation position before start animation

Question

I suppose I could also (or better) word my question as JQuery, how to rotate image from an initial position different than 0 degrees .

I want to animate the rotation of an image from -50deg to 0deg . Unfortunately, for some reason, JQuery set the initial position to 0deg no matter what.

My function:

$("#card").css("opacity", 0).animate(
    {opacity: 1, left: 200, top: 400, deg: 0},
    {
        //start: function() {$(this).css("transform", "rotate(-50deg)");},
        step: function(go) {$(this).css("transform", "rotate(" + go + "deg)");},
        duration: 1000
    }
);

Notice the line commented. That was a futile attempt to set the initial position to the desired rotation degree -50deg so it could go from there to 0deg .

It doesn't help either something like.

$("#card").css("opacity", 0).css("transform", "rotate(-50deg)").animate(
    {opacity: 1, left: 200, top: 400, deg: 0},
    {
        step: function(go) {$(this).css("transform", "rotate(" + go + "deg)");},
        duration: 1000
    }
);

JQuery.animate keeps setting the card's property transform to rotation(0deg) .

How can I avoid this?

---

UPDATE

Thank you to The_Death_Raw for creating this fiddle to illustrate the issue.

Notice, when you click the click button, how the object get rotated back to 0deg before start the animation. I don't want that to happen. I wan't the animation starts from the rotation that the object already have (in the fiddle: 30deg ).

Answer 1

 $(document).ready(function () { DoRotate($("#MyDiv1"), 30); // selector, degres to rotate AnimateRotate($("#MyDiv2"), 0, 30, 2000); // selector, degres rotate from, degres rotate to, duration $("button").on("click", function() { AnimateRotate($("#MyDiv2"), 30, 0, 2000); setTimeout(function(){ AnimateRotate($("#MyDiv2"), 0, 30, 2000); }, 2000); }); }); function DoRotate(element, rotateTo) { $(element).css({ transform: 'rotate(' + rotateTo + 'deg)' }); } function AnimateRotate(element, rotateFrom, rotateTo, duration){ $({deg: rotateFrom}).animate({deg: rotateTo}, { duration: duration, step: function(now){ element.css({ transform: "rotate(" + now + "deg)" }); } }); } 

 .SomeDiv { width:100px; height:100px; margin:25px 25px; display:inline-block } .SomeDiv img { width:100px; height:100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="MyDiv1" class="SomeDiv"> <img src="https://i.pinimg.com/originals/c5/cf/cd/c5cfcde4118dbc6b1c807f879602b9aa.png" alt=""> </div> <div id="MyDiv2" class="SomeDiv"> <img src="https://i.pinimg.com/originals/c5/cf/cd/c5cfcde4118dbc6b1c807f879602b9aa.png" alt=""> </div> <button>CLICK</button>