Changing width/height to a CSS rotated div trigger

Question

I have a <div> that its rotated 66 deg with -webkit-transform(rotate66). When I am performing a resize, width or height, the div seems to change his top/left coordinates. The actual left/top CSS proprieties do not change though. I think that there is something going wrong in the transform matrix.

Is there any way of making the rotated <div> "stay still" on a width/height resize? On resize should be a left and top prop applied to counter this movement but I can't seems to find the right proportions.

You can see the test here (Webkit Only): http://jsbin.com/iqezoj/4/edit

Thank you

Answer 1

You need to specify a -webkit-transform-origin as well to control where the origin of the transformation. Mozilla documentation quite good on this subject.

Edit -webkit-transform-origin: 100px 50px; moves the point to the middle of the <div> in your example. The default value is 50% 50% which will change depending on the height and width of the <div> which explains why the position was shifting.