如何在不使用变换旋转的情况下从下到上写垂直文本？

Question

使用 writing-mode 您只能从上到下阅读要阅读的文本。根据 https://developer.mozilla.org/en/docs/Web/CSS/writing-mode

我唯一的选择是使用 sideways 。但是这个属性是实验性的。

 .verticalTxt_lr {
  writing-mode: vertical-lr;
}
.verticalTxt_rl {
  writing-mode: vertical-rl;
}
.rotate {
  transform: rotateZ(270deg);

}

https://jsfiddle.net/thadeuszlay/5ueopnqu/2/

我想把标签写在竖条上，但它应该从底部开始。

http://jsfiddle.net/thadeuszlay/3HL4a/2402/

在为条形图设置动画时尝试使用 rotate 会给我一种奇怪的行为，因此我正在寻找另一种方法来创建可以在头部向左倾斜时阅读的垂直文本。

原文由 thadeuszlay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我结合 writing-mode 和 rotation ：

     .rotated {
        writing-mode: tb-rl;
        transform: rotate(-180deg);
    }

 <div class="rotated">Text from bottom with working width/height</div>

这对我很有效 width 和 height 表格单元格内的设置。

---

2020年重要编辑：

步骤 1) 查看 https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode，ctrl/cmd-F 获取“结果”。该表将反映您的浏览器（可能实施不当）。看看它下面的表格。那张桌子 应该 是这样的。

解决方案：

为确保您的解决方案经得起未来考验：

1. 查看相应的列，除非您正在使用亚洲语言进行编码，否则将是“Horizontal Script”。
2. 在调整 HTML 元素的大小方面找到适合您需要的行，并且在它下面的第二个表中正确实现（看起来大致相同）。例如 writing-mode:vertical-rl; 目前可以在 Chrome 上运行，直到其他人在 Blink 引擎中正确实现（但如果你的答案基于 sideways-lr 它会在 Blink 正确实现此行为后中断，因为两行不相同。）。
3. 可选：设置 transform-origin 某些东西，也许使用 calc(...) ，基于百分比和/或其他东西
4. 执行 transform:rotate(180deg) 的。这应该可以解决大多数人会遇到的布局问题，导致他们查找此答案。如果有人有动画问题，那是一个单独的问题。

（现在也弃用了 tb-rl）

原文由 Dave 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

 .rotated {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
}

 <div class="rotated">Text from bottom with working width/height</div>

原文由 Maksym Maslakov 发布，翻译遵循 CC BY-SA 4.0 许可协议