javascript - 更改旋转的dom元素的高度时如何保留右下角的位置？

Question

如图所示here .更改旋转某个 Angular 元素的宽度/高度时。元素移动。

当元素的宽度或高度发生变化时，如何固定和保留元素在右下角或任何其他 Angular 落的位置。并且不改变变换原点。

CSS:

.test{
  position: absolute;
  top: 200px;
  left: 200px;

  width: 400px;
  height: 200px;
  background: red;

  transform: rotate(120deg);
}

Answer 1

您可以通过使用百分比绝对定位 .test 对象然后使用变换偏移它们来做到这一点。通过用下面的 css 替换你的 .test css，你将使对象的中心与容器的中心对齐，无论它的大小是多少:

.test{
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(120deg);

    width: 400px;
    height: 200px;
    background: red;
}

为了不使对象居中，您将不得不调整 bottom、right 和 translate 属性的百分比。