CSS Rotate Text Vertical - Extra Space on both sides

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

Answer 1

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;
}

  
BACKGROUND
  
TITLE

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}