在旋转的 div 上缩放时计算新的左侧和顶部答案

【问题标题】：calculate new left and top when scaling on rotated div在旋转的 div 上缩放时计算新的左侧和顶部
【发布时间】：2015-04-08 14:09:50
【问题描述】：

我有这个 div，在一个绝对位置

div
{
  position:absolute;
  width:100px;
  height:100px;
  left: 30px;
  top: 30px;
  background-color:red;
  -ms-transform: rotate(40deg); /* IE 9 */
  -ms-transform-origin: 50% 50%; /* IE 9 */
  -webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
  -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  z-index:1;
}

div.resized
{
  width: 200px;
  background-color:blue;
  z-index:2;
}

<div></div>
<div class="resized"></div>

现在，当我将其宽度设置为 200 像素时，顶部和左侧向上和向一边移动它的原点。

谁能告诉我如何计算这个运动的距离？

【问题讨论】：

请问您为什么需要知道新职位，因为不清楚您要做什么。
嘿 paulie，我有一个对象可以从各个方向旋转和调整大小。当我尝试从右侧调整大小时，一个现在旋转的对象，它不仅从右侧调整大小，它还会将 div 向上和向一边移动。我想知道如何计算此运动以将其设置回其原始位置

标签： javascript html css

【解决方案1】：

如果您希望枢轴点位于左上角，则应相应地设置您的transform-origin。

改变你现有的

transform-origin: 50% 50%;

到

transform-origin: left top;

您需要稍微重新安排定位以获得与原始 sn-p 中呈现的效果相似的效果，但现在旋转应该按您的预期工作。

div
{
  position:absolute;
  width:100px;
  height:100px;
  left: 30px;
  top: 30px;
  background-color:red;
  -ms-transform: rotate(40deg); /* IE 9 */
  -ms-transform-origin: 50% 50%; /* IE 9 */
  -webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
  -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
  transform: rotate(40deg);
  transform-origin: left top;
  z-index:1;
}

div.resized
{
  top: 0;
  left: 0;
  width: 200px;
  background-color:blue;
  z-index:2;
}

<div></div>
<div class="resized"></div>

【讨论】：

谢谢你的回答，问题是我必须保持原点居中，是否有公式可以找到居中时的新顶部和左侧？