Question

这是我的@keyframes。我想制作一个单词动画，例如“Hello”单词将与地球环绕360度。但是，它将绕地球平稳地移动-360度。这个词不会颠倒过来。我的@keyframes错了，但我不知道如何修复它。

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

Answer 1

如果您的目标是2D动画，这是一个快速而肮脏的解决方案。

＆＃13;

@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) }
}

＆＃13;

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

＆＃13;

Answer 2

您只需要完成更多小事，首先要给文本父perspective和transform-style: preserve-3d。对于文字，而不是使用translateX使用translateZ。

https://jsfiddle.net/9qhg1tvr/

＆＃13;

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); }
}

＆＃13;

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

＆＃13;

CSS3字旋转＆amp;翻译动画

2 个答案: