有同样的问题。设法解决它像这样在纯CSS：

.parent {
  position: relative;
}

.child {
  position: absolute;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right;
  left: 30px; /* change this value to match needs */
  top: 30px; /* change this value to match needs */
}

解决办法是迭戈的回答和斯马马蒂的评论相结合：
我不得不使用transform-origin:bottom和width:0。这是相当快的工作，我有一个大问题是定位文本独立的文本长度。我只能设法做到这一点，通过使用javascript。

.header
{
    margin: 0;
    width: 0;
    white-space: nowrap;
    position: absolute;
    text-align: left;
    transform-origin: bottom; 
    margin-top: 280px;
    transform: rotate(270deg);
}

Javascript（确保与变量文本长度兼容）：

function adjustSideHeader() {

//check if the headline is visible
  if($('h1.headline').length > 0)
  {
    var headline = $('h1.headline')[0];
    var stringLength = headline.textContent.length;
    //add style tag to support media queries
    document.querySelector('style').textContent +=
       "h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
  }    
}

// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));

结果：

你试过搬家吗

<h1 class="headline">Über mich</h1>

内

<div class="text">?

并设置了

.text {
    position: relative;
}

这样这个位置就相对于to“text”div了。然后你可能想通过减少它的left值来把Über mich文本移到左边。

你试过使用position:relative和margin属性吗？，我想应该是这样的：

.headline {
     white-space: nowrap;
     position: relative; //changed
     margin-top: 185px; //changed
     margin-left: -20px; //changed
     transform: rotate(270deg);
}

• 注：我认为你应该把标题移到段落内

我有一个答案，可能晚了，但对我来说非常有效。
通常你的文本会有一个类或id，它会是position：absolute，在它后面是定位值，如下所示：

.TextClass{
    position:absolute;
    top:50%;
    left:55%;
    transform:rotate(-90deg);

等等。
但是，旋转时，定位将变为相对定位（如上所述）。
我发现只要将旋转后的文本放在父div中，就可以根据需要定位（未旋转的，绝对位置）父div，然后在父div中旋转文本（位置：相对），如下所示：

.divname{
    position:absolute;
    top:50vh;
    left:50vw;
}
.TextClass{
    position:relative;
    transform:rotate(-90deg);
}