javascript - TweenMax 尝试在文本字段上一次为一个字符设置动画

Question

这是我的 html 代码:

   <h1 id="designs">
      <span>D</span>
      <span>e</span>
      <span>s</span>
      <span>i</span>
      <span>g</span>
      <span>n</span>
      <span>s</span>
   </h1>

我正在尝试补间每个字母以像这样旋转:

TweenMax.staggerFromTo($map.designs.find('span'), 1, {
    rotationY: 180
}, {
    rotationY: 0
}, 0.1);

这不起作用!虽然做了完全相同的事情，但修改了上/左/右/下/不透明度/等值。

请帮我解释为什么我无法修改 3d 值!

Answer 1

我的修改版本可以工作，并且我添加了一个 jsfiddle 供您检查，我还添加了以下 css，这似乎是 Chrome 所需要的，至少在 jsfiddle 中是这样。

span { display: inline-block; }

TweenMax.staggerFromTo($('#designs').children(), 5, {
    rotationY: 180
}, {
    rotationY: 0
}, 0.1);

查看这个 fiddle 以显示它的工作原理:

http://jsfiddle.net/SERT5/2/