# rotation drag

Full Screen

Drag to move. Shift click and drag left/right to rotate.

Using multiple translates in the transform property didn’t work:

``````transform(d){
return [
'  translate(', center,
') scale(', d.scale,
') rotate(', d.rotate,
') translate(', negPos(center), ')'
].join('')
}``````

So I multiplied several affine transformation matrices together to compose the transforms. Math in JS isn’t super pretty:

``````var m = [
a[0]*b[0] + a[2]*b[1], a[0]*b[2] + a[2]*b[3], a[0]*b[4] + a[2]*b[5] + a[4],
a[1]*b[0] + a[3]*b[1], a[1]*b[2] + a[3]*b[3], a[1]*b[4] + a[3]*b[5] + a[5],
]

return [m[0], m[3], m[1], m[4], m[2], m[5]]``````

But things could always be worse.

Update: Robert Monfera pointed out that the above transform string was using the wrong variable to translate, the following does work:

``````transform(d){
return [
'  translate(', d.offset,
') translate(', d.centroid, ')',
') scale(', d.scale,
') rotate(', d.rotate*180,
') translate(', negPos(d.centroid), ')'
].join('')
}``````