Html CSS动画/变换离开屏幕

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

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

#lorem{
字体大小：50px；
颜色：红色；
位置：绝对位置；
最高：5%；
左：5%；
动画：切换10s线性无限；
}
@关键帧切换{
0% {
底部：自动；
最高：3%；
左：3%；
右：自动；
动画计时功能：步骤（1，结束）；
}
25% {
左：自动；
右：3%；
底部：自动；
最高：3%；
动画计时功能：步骤（1，结束）；
变换：旋转（90度）；
}
50% {
顶部：自动；
底部：3%；
右：3%；
左：自动；
动画计时功能：步骤（1，结束）；
变换：旋转（180度）；
}
75% {
右：自动；
左：3%；
顶部：自动；
底部：3%；
动画计时功能：步骤（1，结束）；
变换：旋转（-90度）；
}
}
洛勒姆

将25%的变换更改为

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

百分之七十五

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

---

它在FF和Chrome中有不同的行为，不难理解您需要什么您必须更改

转换原点

点我怀疑。请注意，Chrome中的行为不同于FF，正如对原始问题的评论所述。Chrome中的行为是正确的，我忘了给我的名字加前缀transformations@li0n_za这是我所需要的，但你知道我如何保持与边界的距离与没有边界的角落保持相同吗issue@AC3不幸的是，我不确定，我已经调整了

%

，使它看起来更好一点，但要使其完美，您很可能必须使用jQuery

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