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

Question

如here所示。更改旋转一定角度的元素的宽度/高度时。元素移动。

当改变元素的宽度或高度时，如何在此元素的右下角或任何其他角落固定和保留元素的位置。而且无需更改变换原点。

CSS：

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

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

  transform: rotate(120deg);
}

Answer 1

您可以通过使用百分比绝对定位.test对象，然后使用transform偏移它们来实现。通过将.test css替换为下面的css，无论对象的大小如何，都可以使对象的中心与容器的中心对齐：

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

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

要使对象不居中，您将不得不使用bottom，right和translate属性的百分比。