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

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/

在动画条形图时尝试使用旋转给我一个奇怪的行为因此我正在寻找另一种方法来创建垂直文本,可以在头部向左倾斜的情况下读取.

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表格单元格内的设置.

Answer 2

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

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