メモ：CSSのtransformの各種値をjQueryで取得してみました

この前transformの値をjQueryで取得してみたんですが、結構知らないことがあったのでメモに残しておきます。

transdormの値はmatrix、matrix3dとして取得される

他のcssプロパティのように指定したcss通りの文字列では取得されません。

transform2dで収まっている場合は下記のように6つの値が入った配列で、

// matrix(scaleX, rotate, rotate, scaleY, translateX, translateY)

transform3dとなっている場合は下記のように16つの値が入った配列として取得されました。

// matrix3d(scaleX, rotateZ方向, rotateY方向, perspective, rotateZ方向, scaleY, rotateX方向, perspective, rotateY方向, rotateX方向, scaleZ, perspective, translateX, translateY, translateZ, perspective)

覚えるのがめんどくさいので関数作ってみました

値の順番を覚えるのが面倒なくらい長いので関数を作ってみました。
まずhtmlは適当にこんな感じで、

<p id="transform2d">2Dテスト</p>
<p id="transform3d">3Dテスト</p>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

cssでtransformの値を指定。

#transform2d{
  transform: translate(11px,22px) rotate(40deg) scale(1.5);
}
#transform3d{
  transform: translate3d(11px,22px,33px) rotate3d(0,0,1,-30deg) scale3d(1.5,1.4,1.3) perspective(0);
}

2dの場合の関数はこんな感じにしてみました。

var props = $('#transform2d').css('transform');

function transform_value(e){
  var values = e.split('(')[1];
  values = values.split(')')[0];
  values = values.split(', ');
  var matrix = {
    'scale-x':values[0],
    'rotate-p':values[1],
    'rotate-m':values[2],
    'scale-y':values[3],
    'transform-x':values[4],
    'transform-y':values[5]
  };
  return matrix;
}
console.log(transform_value(props));

cssの指定角度がマイナスの場合は[1]がマイナス、プラスの場合は[2]がマイナスになるようです。このふたつの値は基本的に同じになりそうです。
それとrotateの指定が入ると、scaleの値も微妙に変化するっぽい？見た目の表現を実現するために変化させてるんでしょう多分。

3dの場合の関数はこんな感じにしてみました。
rotateの値の-p,-mはプラス方向とマイナス方向です。

var props2 = $('#transform3d').css('transform');

function transform3d_value(e){
  var values = e.split('(')[1];
  values = values.split(')')[0];
  values = values.split(', ');
  var matrix = {
    'scale-x':values[0],
    'rotate-z-p':values[1],
    'rotate-y-p':values[2],
    'perspective1':values[3],
    'rotate-z-m':values[4],
    'scale-y':values[5],
    'rotate-x-p':values[6],
    'perspective2':values[7],
    'rotate-y-m':values[8],
    'rotate-x-m':values[9],
    'scale-z':values[10],
    'perspective3':values[11],
    'translate-x':values[12],
    'translate-y':values[13],
    'translate-z':values[14],
    'perspective4':values[15]
  };
  return matrix;
}
console.log(transform3d_value(props2));

3d表現をするために回転、スケール関係の値はcssでの指定通りの値にはならないようです。
あと、perspective()を入れると3d扱いになるようです。perspectiveだけmatrix3dの中で4つの値に関与しているのは、たぶんこれバウンティボックスの頂点に対応しているみたいな話な気がします。

ちなみに、skew()はmatrixに該当する値はないようです。
が、2dでも3dでも他それぞれの値を変化させることによって実現しているっぽい。ちょっとよくわからないですが。

まあここまで長々書いてみましたがtransformの値を変化させるだけだったら、現在の値の取得なんて必要ないので、結構使いどころは限定的になるとは思いますが何かの参考になれば幸いです。
何か間違いがあったらお手数ですがTwitterなどでご指摘ただければ幸いです。

いちばんやさしいHTML5＆CSS3の教本 人気講師が教える本格Webサイトの書き方 いちばんやさしい教本シリーズ
-Amazonでみる