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

查看这个小提琴来展示它的工作原理：

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