问题
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
回答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.
来源：https://stackoverflow.com/questions/7091783/changing-width-height-to-a-css-rotated-div-triggers-top-left-reposition