javascript - 如何防止旋转的 div 在改变其宽度时移动？

Question

我所面临的问题重现如下:

.rect {
  transform: rotateZ(45deg);
  background-color: #ddd;
  position: absolute;

  width: 300px;
  height: 200px;

  animation: 3s linear 0s infinite normal none running widen;
}

@keyframes widen {
  from { width: 300px; }
  to { width: 500px; }
}

<div class="rect"></div>

请注意，随着矩形变宽，其位置也会发生变化。确实，该元素的编程位置没有改变，但在屏幕上看起来它确实发生了变化。

我只是想加宽它，而不让它在视觉上看起来移动。也就是说，矩形的右侧应该简单地挤出额外的 200 个像素。这可能吗？

环顾四周，似乎将 transform-origin 从 center 设置为 top left 就可以实现这种效果，但不幸的是我的矩形的原点旋转是围绕其中心。也许解决方案是在效果发生时以某种方式临时设置它..

Answer 1

实现此目的的一个简单方法是将灰色矩形 div 包裹在另一个进行旋转的 div 中。这样宽度和旋转就可以独立控制。

如果还需要应用其他转换，此方法使您可以控制应用转换的顺序。

.rect {
  transform: rotateZ(45deg);
}

.widen {
  background-color: #ddd;
  width: 300px;
  height: 200px;
  animation: 3s linear 0s infinite normal none running widen;
}

@keyframes widen {
  from {
    width: 300px;
  }
  to {
    width: 500px;
  }
}

<div class="rect">
  <div class="widen" />
</div>