css - 通过变换和过渡进行连续旋转

Question

我试图将一个 DOM 元素放在 12 个不同的旋转位置。我知道这完全有可能使用 css 属性的简单 javascript 动画，但我真的很想使用 css 转换/转换来实现它。

所以，考虑一下这个 less 片段:

.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 个不同的位置，并且转换效果很好。

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

有什么想法可以让它发挥作用吗？作为解决方法，我总是可以恢复到 javascript 动画，但我真的更喜欢 css 过渡。

Answer 1

DEMO

技术:

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

详细版:我在pos0前加了一个位置，就是pos-1，它和pos11的视角是一样的但是度值小于 pos0，同样在 pos-1 上，过渡设置为无，因此当您从 pos11 切换到 pos-1 时，您不会注意到视觉上的任何差异，但是旋转值将被设置为小于 pos0，现在您可以轻松地从 pos-1 跳到 pos0 并使用平滑的顺时针动画 -希望我解释清楚。

如何在您的工作流程中应用:无论您使用什么方法来切换类，在从 pos11 切换到 pos0 时添加一个条件，只需一小秒从 pos11 切换到 pos-1 然后到位置 0.

注意:我对 sass 比较熟悉，所以我在演示中使用了 sass 下面是我添加的 scss 的 less 版本:

少:

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