CSS 动画/变换离开屏幕答案

【问题标题】：CSS animation/transform going off screenCSS 动画/变换离开屏幕
【发布时间】：2015-09-21 20:15:37
【问题描述】：

我正在为屏幕的每个角落设置动画文本。在每个角落，文本都被旋转。这里的问题是，在右上角和左下角，文本离开了屏幕。我认为这与旋转有关。

我的问题是如何将全文以正确的位置显示在屏幕上？

#lorem {
    font-size: 50px;
    color: red;
    position: absolute;
    top: 5%;
    left: 5%;
    animation: switch 10s linear infinite;
}
@keyframes switch {
    0% {
        bottom:auto;
        top:3%;
        left: 3%;
        right: auto;
        animation-timing-function: steps(1, end);
    }
    25% {
        left:auto;
        right:3%;
        bottom: auto;
        top: 3%;
        animation-timing-function: steps(1, end);
        transform: rotate(90deg);
    }
    50% {
        top:auto;
        bottom:3%;
        right: 3%;
        left: auto;
        animation-timing-function: steps(1, end);
        transform: rotate(180deg);
    }
    75% {
        right:auto;
        left:3%;
        top: auto;
        bottom: 3%;
        animation-timing-function: steps(1, end);
        transform: rotate(-90deg);
    }
}

<span id="lorem">Lorem</span>

【问题讨论】：

它在 FF 和 Chrome 中的行为不同，很难理解你需要什么
您必须更改我怀疑的 transform-origin 点。

标签： html css css-animations css-transforms

【解决方案1】：

将你的变换更改为 25% 为

transform: rotate(90deg) translate(50px,0px);

75% 到

transform: rotate(-90deg) translate(50px,0px);

fiddle

【讨论】：

请注意，Chrome 中的行为与 FF 不同，正如原始问题的 cmets 所指出的那样。
chrome 中的行为是正确的，我忘记为我的转换添加前缀
@li0n_za 这正是我所需要的，但您是否也知道如何在没有问题的角落与边界保持相同的距离
@AC3 不幸的是我不确定，我已经对% 进行了一些调整，所以它看起来更好一点，但要让它完美，你很可能必须使用 jQuery 来做到这一点跨度>