Question

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

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

会发生什么：如果我重置为0，则div首先向后旋转。我试图在＆＃34;倒退之前禁用转换属性，没有任何运气。

是否有一种简单的方法可以在没有任何转换/旋转的情况下恢复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属性设置为0，然后将旋转更改为0（这样它将立即旋转），然后将转换更改回＆＃34;默认＆＃34;值。

感谢@Harry，这是一个有效的演示：

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

无需转换即可重置RotateY度

1 个答案: