具有变换和转换的连续旋转

Question

我试图把一个DOM元素在12个不同的旋转位置。我知道这是完全可能使用简单的javascript动画的css属性，但我真的很想得到这个工作使用css变换/过渡。

那么，考虑下面的代码片段:

.setRotation (@degrees) {
    -moz-transform: rotateZ(@degrees);
    -ms-transform: rotateZ(@degrees);
    -o-transform: rotateZ(@degrees);
    -webkit-transform: rotateZ(@degrees);
    transform: rotateZ(@degrees);
}
img {
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    -o-transition-property: transform;
    -ms-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    &.pos0 {
        .setRotation (15deg)
    }
    &.pos1 {
        .setRotation (45deg)
    }
    &.pos2 {
        .setRotation (75deg)
    }
    &.pos3 {
        .setRotation (105deg)
    }
    &.pos4 {
        .setRotation (135deg)
    }
    &.pos5 {
        .setRotation (165deg)
    }
    &.pos6 {
        .setRotation (195deg)
    }
    &.pos7 {
        .setRotation (225deg)
    }
    &.pos8 {
        .setRotation (255deg)
    }
    &.pos9 {
        .setRotation (285deg)
    }
    &.pos10 {
        .setRotation (315deg)
    }
    &.pos11 {
        .setRotation (345deg)
    }
}

通过简单地应用相应的类，我现在可以很容易地旋转到这12个不同的位置，并且转换工作得很好。

BUT:当从。pos11过渡到。pos0时，它不是顺时针旋转30度，而是逆时针旋转330度。当然，这是有道理的，它只是从345转换到15。我可以通过从345度转换到375度来解决这个问题，但这使得使用预定义的css类变得困难。

有什么办法让它工作吗?我总是可以恢复javascript动画作为一个解决方案，但我真的更喜欢css过渡。

Answer 1

DEMO

技术:

简单版本:使用视觉上相似但度值较小的值，不带过渡，将度移动到更小的值，从较低的值开始动画。

详细版:之前我添加了一个新的职位pos0 pos-1,它有相同的视觉度角pos11但程度值小于pos0,同样在pos-1过渡设置为none当你从pos11转向pos-1你不会注意到任何不同的视觉,但旋转值会被设置为小于pos0,现在你可以很容易地从pos-1跳到pos0光滑顺时针动画——希望我解释得清楚一些。

如何在您的工作流程中应用:无论您使用什么方法来切换类，在从pos11切换到pos0时添加一个条件，只需从pos11切换到pos1，然后切换到pos0。

注意:我对sass更熟悉，所以我在演示中使用了sass，下面是我添加的sss的精简版本:

少

:

&.pos-1 {
    -webkit-transition: none;
    -moz-transition:    none;
    -o-transition:      none;
    -ms-transition:     none;
    transition:         none;
    .setRotation (-15deg)
}