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

Question

我有这个 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>

现在，当我将其宽度设置为 200px 时，顶部和左侧向上移动并远离它的原始点。

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

Answer 1

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

改变你现有的

transform-origin: 50% 50%;

到

transform-origin: left top;

您需要稍微重新安排位置以获得与原始代码段中呈现的效果类似的效果，但现在旋转应该如您预期的那样工作。

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>