CSS-анимация/трансляция с экрана

Я анимация текста в каждом углу экрана. В каждом углу текст поворачивается. Проблема в том, что в правом верхнем и нижнем левом углу текст отключается. Я думаю, что это связано с поворотом.CSS-анимация/трансляция с экрана

Мой вопрос в том, как сохранить полный текст на экране с правильным положением?

JSFIDDLE

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

источник

2015-09-21 AC3

Он имеет различное поведение в FF и в Ch rome, немного сложно понять, что вам нужно – areim

Вам нужно будет изменить подозрительную точку «transform-origin». –

изменить ваше преобразование на 25% до

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

и 75% до

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

fiddle

источник

2015-09-21 11:57:36

Обратите внимание, что поведение в Chrome отличается от FF, как указано в комментариях к исходному вопросу. –

Поведение в хроме является правильным, я забыл добавить префиксы для своих преобразований – AC3

@ li0n_za это то, что мне было нужно, но вы также знаете, как я могу поддерживать то же расстояние от границы, что и углы, где у меня нет вопрос – AC3

CSS-анимация/трансляция с экрана

ответ

Смежные вопросы