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

Question

有没有办法在不知道行高/父高为负translate的情况下自动实现这一目标？

理想的解决方案：

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

期望：实际结果：

jsfiddle here

.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

您可以尝试以下方法：

.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>

Answer 2

好吧，对我来说，魔力似乎在孩子的绝对位置上。这样，父对象会缩小到零高度，其中左上角等于左下角。

.child {
  position: absolute;
}

但是该解决方案不适用于由于其他内容而不会缩水的父母。