《TweenMax》CSSのrotate3d()関数の値の渡しかたのコツ。 #JavaScript

TweenMaxでアニメーションをつくるとき、transform関連の便利なプロパティが割り当てられていますが、rotate3d()で定義したい値を渡すときには、計算してあげる必要があります。


#anim {
  transform : rotate3d(-1,1,0,180deg)
}

この状態を実現するためには、


TweenMax.to($('#anim'), 1,
{
  rotationX: -1 * 180,
  rotationY: 1 * 180,
  rotationZ: 0  * 180,
});

各軸の値に角度を乗算します。

こんなかんじ。


/**
* #anim {
*   transform : rotate3d(x, y, z,　deg)
* }
*/

TweenMax.to(#anim, 1,
{
  rotationX: x * deg,
  rotationY: y * deg,
  rotationZ: z * deg,
});

おわります。