css 文本旋转 - 仅文本，而不是父元素

Question

在此页面上：https://www.bcidaho.com/mammography/

如果您点击“查找筛选中心”出现一个信息表...

我如何旋转最后 5 个单元格中的文本？

显然跨浏览器会有所帮助...这将使表格能够正确适合...

并且我是否必须在 TD 上设置高度才能使其正确适合？

Answer 1

看看这个页面： https://www.udemy.com/blog/css -旋转文本/
在“使用 CSS 变换属性旋转文本”部分中。

您必须在 CSS 文件中创建一个 class 或 id，并将其应用于要旋转的文本，而不是 div。

Answer 2

该问题的链接不再有效。我假设用例是您想要在 div 内旋转文本，而不弄乱 div 的宽度、高度、x、y、背景等。例如，如果您直接旋转 div，它的背景也会旋转。

一种解决方案是在父元素中嵌套旋转元素。

.parent {
  margin: 100px; 
  width: 150px;
  height: 50px;
}

div {
  outline: 1px solid red;
 
}

.child {
  transform-origin: center left;
  transform: rotate(300deg) translate(-25px, 25px);
}

<div class="parent">
  <div class="child">
    Text label
  </div>
</div>