CSS animation/transform 离开屏幕

Question

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

我的问题是如何让全文在屏幕上保持正确的位置？

#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>

Answer 1

将 25% 的变换更改为

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

75%

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

fiddle

CSS animation/transform 离开屏幕

CSS animation/transform going off screen

html

css

css-transforms

css-animations