Resetting RotateY degrees without transformation

Question

I use css 3D-transform rotateY to flip a div with css transition. I want the image to flip for a certain number of times : when the transition ends, I trigger it again until a certain counter value is reached.

What I would like to do : when the rotateY reaches 360 deg, I want reset it to 0 to restart the same rotation.

What happens: if I reset to 0, the div rotates backward first. I tried to disable the transform property before "rewinding', without any luck.

Is there an easy way to restore the 0 deg value without any transformation / rotation?

I did a codepen to illustrate: http://codepen.io/3MO/pen/QKogxE

It is not very graphical, but if you click on start, then reset, it will be obvious.

Here is my reset function:

$('#reset').click(function () {
    deg = 0;
    countRotations = 0;

    $('#card').attr('transition', 'transform 0');

    flipStarted = false;
    flip($('#card'), 0);
});

This is what you should do. I'm not posting as answer since the existing answer is effectively the same. — Harry
Thanks, it works. What I don't explained, I tried with the following statement: — Joel
$('#card').attr('transition', 'none'); but it didn't and does not work. — Joel
Yea, that won't work because transition is not a HTML attribute. It is a CSS property and so you've got to use style attribute to set it on the element. — Harry

Bálint Bálint · Accepted Answer · 2016-10-25T09:01:26

You need to set the transition property to 0s, then change the rotation to 0 (this way it'll rotate instantly), then change the transition back to the "default" value.

Thanks to @Harry here's a working demo:

http://codepen.io/hari_shanx/pen/PGLKzN

Resetting RotateY degrees without transformation

1 Answers