css - 在不进行变换的情况下重置 RotateY 度数

Question

我使用 css 3D-transform rotateY 翻转带有 css transition 的 div。我希望图像翻转一定次数:当转换结束时，我再次触发它直到达到某个计数器值。

我想做什么:当 rotateY 达到 360 度时，我想将其重置为 0 以重新开始相同的旋转。

会发生什么:如果我重置为 0，则 div 首先向后旋转。我试图在“倒带”之前禁用 transform 属性，但没有任何运气。

有没有一种简单的方法可以在不进行任何变换/旋转的情况下恢复 0 度值？

我做了一个代码笔来说明:http://codepen.io/3MO/pen/QKogxE

它不是很图形化，但是如果你点击开始，然后重置，它会很明显。

这是我的重置函数:

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

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

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

Answer 1

您需要将 transition 属性设置为 0s，然后将旋转更改为 0(这样它会立即旋转)，然后将过渡更改回“默认”值。

感谢@Harry，这是一个工作演示:

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