Question

我希望文字从包中垂直出来，然后转90度，这样文本就会在我想要的地方正确位置。

现在，我的测试在我的页面上进行了一个巨大的循环。它落在我想要的地方，但它完全出错了。我创造了一个小提琴，但它确实没有做任何正义，因为它根本不看我的。如果有任何方法可以表明我的意图，我会这样做。

我希望它看起来像是从包中取出的名字。就像他们会在一个房间里有10个人从包中取出名字一样。

我将这些关键帧设置为我想要的fegree，所以再一次，我不确定为什么我会做360.

@-moz-keyframes spin {


 0% {
        -moz-transform: rotate(110deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(110deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(110deg);
        transform:rotate(110deg);
    }

想象一只鸟飞起来，在空中做一个大圆圈，这就是我正在做的事情。

知道如何解决这个问题吗？

Answer 1

您是否考虑过使用transform-origin财产？

查看 this 。这是你想要实现的目标吗？

<强> CSS：

.shuffle_results {
    position: relative;
    z-index: -1;
    font-size: 2em;
    -webkit-animation:spin 3s linear;
    -moz-animation:spin 3s linear;
    animation:spin 3s linear;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}
@-moz-keyframes spin {
    0% { -moz-transform: translate(0px, 200px) rotate(140deg); }
    100% { -moz-transform: translate(0px, 0px) rotate(0deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: translate(0px, 200px) rotate(140deg); }
    100% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes spin {
    0% { -webkit-transform: translate(100px, 200px) rotate(140deg); transform: translate(100px, 200px) rotate(140deg); }
    100% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); }
}
#paperBag {
    position: relative;
    bottom: 0px;
    left: 0px;
    margin-top: 40px;
    z-index: 1;
}

动画设置不正常

1 个答案: