If you rotate editable element, fix the transform-origin coordinates

The rotation is agains the transform-origin, which by default is 50% 50%. When the size is changing, the point of rotation also changes, and this causes the rotated element to move. You can fix the point of rotation by setting the transform-origin field in pixels. It won't move while you are typing, but if you attempt to change the rotation, it won't be around the element center (assuming the element center has changed since you've set it).

So before changing the rotation angle, you need to reset transform-origin to the center of the element, but as soon as you do it, the position of the element would change, so you need to correct the position as well. Get the difference of the positions of the bounding box before and after the change of transform-origin and add it to the element coordinates. Here is some code

http://stackoverflow.com/questions/19903099/rotated-contenteditable-moves-while-user-typing