html - 父元素布局wrt旋转元素的边界框

Question

我想将表格标题中的文本旋转 90 度（恕我直言，这是一个明智的用例），但是transform: rotate(-90.0deg);在布局方面表现不佳。也就是说，父元素将它的高度调整为子元素的高度，旋转后就是宽度。这很烦人，因为这主要使子元素显着溢出父元素，导致文本与其他文本重叠。

示例（https://jsfiddle.net/jpe3voxy/）

<div id="z">
  A very long header
</div>
<div id="a">
  <div id="b">
    Hello World
  </div>
</div>

#a {
  background-color: blue
}

#b {
  background-color: red;
  transform: rotate(-90.0deg);
  overflow: hidden;
  height: 50px; width: 200px;
}

元素#b与标题重叠。可以通过#b在#a. 换句话说，手动布局很麻烦，一般不适用于#b.

问题如何使父元素布局成为子元素的边界框，而不是子元素的未转换大小？

标签： htmlcss

Answer 1

想法是考虑为转换后的元素添加边距，使其高度+边距等于其宽度，然后调整变换原点：

#a {
  background-color: blue;
  overflow:hidden;
}

#b {
  background-color: red;
  transform: translateX(-100%) rotate(-90.0deg);
  overflow: hidden;
  height: 50px;
  width: 200px;
  margin-bottom:calc(200px - 50px);
  transform-origin:top right;
}

<div id="z">
  A very long header
</div>
<div id="a">
  <div id="b">
    Hello World
  </div>
</div>