direct manipulation
I've created a small demo of direct multitouch object manipulation because I hadn't figured out hammer.js at first. Well, at least now I know how this is done. Correct implementations keep the object points you have "grabbed" always under your fingers. For example, when only one finger moves in circle around another, the object rotates around the "grabbed" point.
The trick is when your fingers move to the new coordinates you should calculate such a transformation for the object, that will move the "grabbed" points to these coordinates. You could try doing that with CSS transform operators translate, scale and rotate, but calculating these would be trickier. A more reliable approach is to use matrix, though you can't avoid calculations. To my surprise I couldn't find complete formulas online, so I had to recall linear algebra, matrix calculus and solving systems of linear equations. So when you have new coordinates S1 and S2, here is how you derive the matrix to move points I1 and I2 there:
var a = ((S1.x - S2.x) * (I1.x - I2.x) + (S1.y - S2.y) * (I1.y - I2.y)) /
(Math.pow(I1.y - I2.y, 2) + Math.pow(I1.x - I2.x, 2));
var c = ((S1.y - S2.y) - a * (I1.y - I2.y)) / (I1.x - I2.x);
var tx = S1.x - a * I1.x + c * I1.y;
var ty = S1.y - c * I1.x - a * I1.y;
return new Matrix([
[a, -c, tx],
[c, a, ty],
[0, 0, 1]
]);
The rest of it is simple: save the "grabbed" point on the first touch, when touches move calculate the new matrix and set it to object's style.