CSS 变换：将子项的左上角旋转到父项的左下角

Question

有没有办法在不知道线 height/parent 高度为负值 translate 的情况下自动实现这一点？

理想的解决方案：

transform: translate(-100% of parent height or 1 line height here pls)
transform-origin: top left over bottom left

期望： actual result:

.parent {
  margin-top: 100px;
  border: 1px solid green;
  border-left-color: red;
  position: absolute;
}

.child {
  border: 1px solid orange;
  border-left-color: red;
  transform: rotate(-90deg)/*translate(-20px)*/;
  transform-origin: top left;
}

<div class="parent">
  <div class="child">
    CONCEPT
  </div>
</div>

Answer 1

好的，对我来说魔法似乎处于 child 的绝对位置。这样 parent 缩小到零高度，其中 top-left 角变得等于 bottom-left 角。

.child {
  position: absolute;
}

不过，此解决方案不适用于 parent 不会因其他内容而缩小的内容。

Answer 2

你可以试试这个：

.parent {
  border: 1px solid green;
  border-left-color: red;
  margin-top:100px;
  position:absolute;
}

.child {
  border: 1px solid orange;
  border-left-color: red;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: bottom left;
}

<div class="parent">
  <div class="child">
    CONCEPT
  </div>
</div>

CSS 变换：将子项的左上角旋转到父项的左下角

CSS transform: rotate top-left corner of child over bottom-left corner of parent

html

css

css-transforms