CSS3文字旋转和翻译动画答案

【问题标题】：CSS3 word rotate & translate animationCSS3文字旋转和翻译动画
【发布时间】：2016-07-18 00:00:46
【问题描述】：

这是我的@keyframes。我想做一个文字动画，例如“你好”这个词会用地球360度环绕。但是，它会在地球周围-360度平滑移动。这个词不会颠倒。我的@keyframes 是错误的，但我不知道如何解决它。

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

【问题讨论】：

你能创建一个工作的sn-p吗？
顺便说一下，你的css是无效的。删除translate 属性后的;。

标签： html css animation

【解决方案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>

【讨论】：

【解决方案2】：

你只需要更多的小东西来完成它，首先给文本父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>

【讨论】：

这就是我想要的。但是，我想问我是否要水平移动一段时间然后旋转。如何制作？
然后制作一个 25% 的帧并使用 translateX 并在其中重置旋转 jsfiddle.net/9qhg1tvr/1 。