在旋转的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>