CSS Rotate Text Vertical - Extra Space on both sid

Question

When I rotate and inline layer with TEXT, it adds extra space (width of large text) on the rotation, I dont want to fix. What is the best way to avoid extra space (width of element) on both sides when rotating with CSS.

Below is my Code:

.rotate {
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 100%) rotate(-90deg);
  transform-origin: 0 0;
  vertical-align: bottom;
}

.rotate:before {
  content: "";
  float: left;
  margin-top: 100%;
}

.rotate:after {
  content: "";
  display: inline-block;
}

<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

Answer 1

Here you go:

http://jsfiddle.net/9Y7Cm/13205/

vertical-align is the key to answer.

Answer 2

transforms are entirely visual...they do NOT affect the layout of elements. Space is not being added...it's there all the time.

Consider using writing-mode instead.

.rotate {
  writing-mode: vertical-rl;
  text-align: center;
  transform:rotate(180deg);
  background: pink;
  height:100vh;
}

<div class="rotate">
  <h2>BACKGROUND</h2>
  <h1 >TITLE</h1>
</div>

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

^{Writing-mode @ MDN}

Answer 3

Very simple answer

<div class="fixed-left">
  <div class="fixed-left-inner">
    <div class="fixed-left-item">
      <div class="fixed-left-text">Text might be on left side</div>
      <div class="fixed-left-text">Text might be on left side</div>
    </div>
  </div>
</div>



.fixed-left{
    display: block;
    position: fixed;
    width: 40px;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 99999;
    height: 100%;
 }
 .fixed-left-inner{
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
 }
 .fixed-left-item{
    display: block;
    transform: translate(0,50%) rotate(-90deg);
    transform-origin: 0 0;
    vertical-align: bottom;
    height: 100%;
    margin-top: 110px;
    width: 220px;
 }
 .fixed-left-text{
      font-size: 13px;
    line-height: 18px;
 }

Answer 4

You may try to use writing-mode .

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

---

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

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)