<path/>の位置を設定するときstyleのtransform:matrix3d()を使うと良いのですが、なんだかtransform:matrix3d()の仕様が複雑なのでメモ書きを残します。
参考文献:http://www.htmq.com/css3/transform_matrix3d.shtml
平行移動のみで、回転・拡大縮小をしない場合
var _x = Math.random()*400; var _y = Math.random()*400; var _z = 1; path.setAttribute('style', 'transform:matrix3d(1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,'+ _x + ',' + _y + ',' + _z + ', 1)');
これも足して・・・。
Z軸回転のみで、拡大縮小・平行移動をしない場合 matrix3d( Math.cos(角度値), Math.sin(-角度値), 0, 0, Math.sin(角度値), Math.cos(角度値), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )
拡大縮小も足した。
黒枠の中をクリックした時に雪の結晶がスタンプされるのですが、調節不十分なため座標がたまにviewBoxから外れる時があります。
https://tomo.mobi/test/greensock/star_position.html
やっぱり、何か作る材料をそろえるのが一番時間かかる。
もっと、まともな物を作れるようになりたいな・・・