将宽度/高度更改为CSS旋转的div触发上/左重新定位 [英] Changing width/height to a CSS rotated div triggers top/left reposition

问题描述

我有一个< div> 它的旋转66度与 -webkit-transform（rotate66）。当我执行调整大小，宽度或高度时，div似乎改变他的顶/左坐标。实际的 left / top CSS属性不会改变。我认为转换矩阵中出现了问题。

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.

有任何方法使旋转的< div> 在宽度/高度调整大小？在调整大小应该是一个左和上面的道具应用于这种运动，但我似乎找不到正确的比例。

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.

你可以看到这里的测试）： http://jsbin.com/iqezoj/4/edit

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

谢谢

推荐答案

您需要指定 -webkit- transform-origin 以及控制其中转换的起源。 Mozilla文档在此主题上相当不错。

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.

编辑 -webkit-transform-origin：100px 50px; 将点移动到< div> 。默认值为 50％50％，其将根据< div> 的高度和宽度而更改解释了为什么这个职位正在转移。

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.

这篇关于将宽度/高度更改为CSS旋转的div触发上/左重新定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！