TweenMax tentando animar um personagem no campo de texto - javascript, css, animação, tweenlite, tweenmax

Este é o meu código 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>

E estou tentando interpolar cada letra para girar da seguinte maneira:

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

Isto não está a funcionar! Apesar de fazer exatamente a mesma coisa, mas modificar os valores superior / esquerdo / direito / inferior / opacidade / etc. funciona.

Por favor, me dê uma mão de por que não consigo modificar os valores 3d!

Respostas:

Minha versão modificada funciona e eu incluí um jsfiddle para você verificar, também adicionei o seguinte css que parece ser necessário para o Chrome, pelo menos no jsfiddle.

span { display: inline-block; }

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

Veja este violino para mostrá-lo funcionando:

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