CSS相对于当前位置旋转

Question

我有一个旋转轮图形，可以无限旋转0到360度。

然后我想要反向旋转该元素每次固定量，而不是相对于它的0度位置的特定位置。

换句话说，这就是现在发生的事情：

Wheel is at 5 degrees
Wheel is reset
Wheel moves 5 degrees back to 0

Wheel is at 270 degrees
Wheel is reset
Wheel moves 270 degrees back to 0

我想要的是一贯的运动：

Wheel is at 5 degrees
Wheel is reset
Wheel moves 180 degrees back

Wheel is at 270 degrees
Wheel is reset
Wheel moves 180 degrees back

有什么建议吗？

我们正在使用Bourbon.io SASS库，因此SASS代码如下所示：

.spin {
    @include animation(spin 3.0s linear infinite);
}

@include keyframes(spin) {
    from {
            @include transform(rotate(0deg));
    }
    to {
            @include transform(rotate(360deg)); 
    }
}

.spin-back {
    @include animation(spinBack 3.0s linear infinite);
}

@include keyframes(spinBack) {
    to {
            @include transform(rotate(0deg)); 
    }
}

通过脚本点击切换类旋转和旋转。