CSS3 word rotate & translate animation

Вот мои @keyframes. Я хочу сделать анимацию слов, например, слово «Hello» будет окружать 360 градусов землей. но он будет плавно перемещаться на 360 градусов вокруг земли. слово не будет перевернуто. Мои @keyframes ошибаются, но я не знаю, как это исправить.CSS3 word rotate & translate animation

@keyframes move { 
     from { 
      transform: translate(-100px); 
      rotateY(0deg) 
      transform-origin: 100px; 
     } 
     to { 
      transform: translate(-200px); 
     rotateY(-360deg) 
      transform-origin: 150px; 
     } 
    }

источник

2016-07-17 soul299

Вы можете создать рабочий фрагмент кода, пожалуйста? –

Кстати, ваш css недействителен. Удалите ';' после свойства 'translate'. –

Вам просто нужно больше мало вещей, чтобы достигнуть этого, первые дают текста родителя perspective и transform-style: preserve-3d. и для текста, вместо использования translateX использовать translateZ.

https://jsfiddle.net/9qhg1tvr/

body { 
 
    width: 100px; 
 
    height: 100px; 
 
    perspective: 1000px; 
 
    transform-style: preserve-3d; 
 
    padding-left: 200px 
 
} 
 

 
img { 
 
    position: absolute; 
 
} 
 

 
p { 
 
    width: 100px;height:100px; 
 
    font-size: 80px; 
 
    text-transform: uppercase; 
 
    transform: rotateY(40deg); 
 
    animation: rotate 4s linear forwards infinite; 
 
    transform-origin: right center 
 
} 
 

 
@keyframes rotate { 
 
    0% { transform: rotateY(0deg) translateZ(0px); } 
 
    50% { transform: rotateY(180deg) translateZ(400px); } 
 
    100% { transform: rotateY(360deg) translateZ(0px); } 
 
}

<body> 
 
    <img src="http://www.pngall.com/wp-content/uploads/2016/06/Earth-PNG-Clipart.png" alt="earth"> 
 
    <p> 
 
    hello 
 
    </p> 
 
</body>

источник

2016-07-17 16:00:46

Вот чего я хочу. Тем не менее, я хочу спросить, хочу ли я двигаться горизонтально некоторое время, а затем вращаться. Как это сделать? – soul299

Затем сделайте кадр таким 25% и используйте 'translateX' с сбросом вращения в нем https://jsfiddle.net/9qhg1tvr/1/. –

Если вы нацелены на 2D-анимацию, это быстрое и грязное решение.

@import 'https://necolas.github.io/normalize.css/latest/normalize.css'; 
 
html{ padding:10px; text-align:center; text-transform:uppercase } 
 
span{ display:inline-block; transform:translateY(50px) } 
 
#ch1{ transform:rotateZ(-45deg); transform-origin:100% 200% } 
 
#ch2{ transform:rotateZ(-30deg); transform-origin:0% 100% } 
 
#ch3{ transform:translateX(5px) translateY(-3px) } 
 
#ch4{ transform:rotateZ(45deg); transform-origin:130% 170% } 
 
#ch5{ transform:rotateZ(33deg); transform-origin:-70% 330% } 
 
#earth{ 
 
    width:100px; height:100px; background:deepskyblue; 
 
    border-radius:100%; line-height:100px; margin:0 auto; 
 
    transform:translateY(70px) 
 
} 
 
#curve{ 
 
    animation-name:orbit; animation-duration:3s; 
 
    animation-iteration-count:infinite; 
 
    transform-origin:50% 500%; 
 
} 
 
@keyframes orbit{ 
 
    0%{ transform:translateY(50px) rotateZ(0) } 
 
    100%{ transform:translateY(50px) rotateZ(360deg) } 
 
}

<span id="curve"> 
 
    <span id="ch1">h</span> 
 
    <span id="ch2">e</span> 
 
    <span id="ch3">l</span> 
 
    <span id="ch4">l</span> 
 
    <span id="ch5">o</span> 
 
</span> 
 

 
<div id="earth">earth</div>

источник

2016-07-17 15:54:02

CSS3 word rotate & translate animation

ответ

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