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

这不起作用！虽然做了完全相同的事情，但改为修改top / left / right / bottom / opacity / etc. ..值有效。

请帮我解释为什么我无法修改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/

TweenMax尝试在文本字段上动画一个字符

1 个答案: