Question

我是这个div，处于绝对位置

＆＃13;

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;
}

＆＃13;

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

＆＃13;

现在，当我将其宽度设置为200px时，顶部和左部向上移动而不是向上移动原点。

有人可以告诉我如何计算这次运动的距离？

Answer 1

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

更改现有

transform-origin: 50% 50%;

到

transform-origin: left top;

您需要稍微重新排列定位以获得与原始代码段中显示的效果类似的效果，但现在旋转应该按预期工作。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在旋转div上缩放时计算新左和上

1 个答案: