您可以尝试使用 写作模式 .

You may try to use writing-mode .

writing-mode CSS 属性定义文本行是水平还是垂直布局，以及块前进的方向.

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

https://codepen.io/gc-nomade/pen/rGJGzQ?editors=1100

.rotate {
  writing-mode:vertical-rl;
  transform:scale(-1);
  width:50px;
  margin-right:50px;
}

body {
  display:flex;
  align-items:flex-end; 
}

<div style="display:inline-block; position:relative;" class="rotate">
  <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span>
  <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span>

</div>
Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

或 transform:rotate(-90deg) (这是您的首选)，但使用伪来根据文本长度重置高度.(这需要使用 rgba() 颜色并将两行文本设置在一个容器中.https://codepen.io/gc-nomade/pen/RLQLJG?editors=1100

or transform:rotate(-90deg) (which was your first choice), but with a pseudo to reset height according to text-length. (this requires to use rgba() colors and set both line of text in a single container. https://codepen.io/gc-nomade/pen/RLQLJG?editors=1100

.rotate {
  width:110px;
}
.rotate>span   {
  display:inline-block; 
  transform:rotate(-90deg)
}
.rotate > span:before {
  content:'';
  padding-top:100%;
  float:left;
}

body {
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

			<div style="display:inline-block; position:relative;" class="rotate">
				<span style=" font-size: 55px;color: rgba(0,0,0,0.15);white-space: nowrap;">BACKGROUND<br/>
				<span style="display:block;font-size: 45px;color: #222222;text-align:center;">TITLE</span></span>				
			</div>
      Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

两种技术，需要为旋转文本容器设置宽度，并且是从弹性容器构建的.它应该可以在 IE、FF、Chrome 中运行.(display:table/table-cell 可以是旧浏览器的另一个 display 选项)

Both technics here, requires to set a width to the rotating text container and are build from a flex container. It should work in IE,FF,Chrome. (display:table/table-cell can be another display option for older browser)