CSS为响应式布局旋转了文本

Question

我正在使用我之前发布的一个问题的回答：Rotated text producing inconsistent results但我需要以不同的方式显示文字。我需要在顶部单词的第一个字母，旋转的文本固定在右下方，如下面的屏幕截图所示。目前我的代码在底部开始。解决方案必须在流畅/响应式布局中工作。

这是JSFiddle：https://jsfiddle.net/wy0qq027/

我想要实现的目标

CSS：

n

Answer 1

文本需要正向旋转90度才能获得所需效果，然后将div附加到右侧而不是左侧

.rotate {
    white-space: nowrap;
    position: absolute;
    bottom: 50px;
    right: 100px; /* offset from right */
    z-index: 1;
    transform-origin: right bottom;
    transform: rotate(90deg);
}

working jsfiddle fork