当div旋转时,让CSS离开和顶部

时间:2014-07-16 16:06:14

标签: javascript css rotation

我正在尝试使用style.left旋转矩形div后的style.topstyle.transform=rotate(90deg)

我理解div是如何旋转的,它围绕“变换点”旋转。而且我也明白div可以旋转45度,所以给它新的顶部/左边会很笨拙(实际上是左边/上边的边框)。

但回到最初的问题,将矩形div旋转90度,有没有办法让“新”左/上?

我需要这个的原因是,我正在努力上传图像,允许用户缩放,旋转等项目,但目前必须使用PHP来保持所有尺寸的最终图像正确(这是显然很糟糕,因为我必须在PHP完成旋转/缩放等后继续加载新图像。

我还做了一点jsfiddle表示旋转时顶部/左侧位置没有变化

1 个答案:

答案 0 :(得分:2)

好的,感谢上面留下的评论,我设法回答了问题。

基本上使用:

newleft = parseInt(div.style.top) + Math.cos(90) * parseInt(div.style.height);
newtop = parseInt(div.style.left) + Math.sin(90) * parseInt(div.style.height);
在div旋转之后

我已经更新了我的jsfiddle,因为上面评论中的一个使用了jQuery,但这种方式只使用了javascript。