css rotation with absolute position

Question

I have a fixed background, and a div with an absolute position in it; I would like to place it at the top: 5px and left: 5px, It's working when I have no rotation of the text, but I want to get my text verticaly, so I make a rotation 90°. I would like to stick it from left: 5px and top 5px but when I apply the rotation, the text is cut above the page, and even the left part is misplaced ..

Here is some css code (I'm using glamor but it should work the same as normal css)

const background = css({
  background: 'url(/static/profile.jpg) no-repeat left top fixed',
  backgroundSize: 'auto 100%',
  backgroundColor: '#040404',
  position: 'fixed',
  width: '100%',
  height: '100vh',
  top: '0',
  left: '0',
  zIndex: '0',
})

const socialBloc = css({
  color: '#fff',
  position: 'absolute',
  top: '5px',
  left: '5px',
  zIndex: '999',
  '-webkit-transform': 'rotate(270deg)',
  '-moz-transform': 'rotate(270deg)',
  '-ms-transform': 'rotate(270deg)',
  '-o-transform': 'rotate(270deg)',
  transform: 'rotate(270deg)',
})

And the Html:

<PageLayout pageName="Index">
  <div className={socialBloc}>
     <Link prefetch href='*'><a className={a} target="_blank">Link</a</Link>
     <Link prefetch href='*'><a className={a} target="_blank">Link</a</Link>
  </div>
  <div className={background}>
  </div>
</PageLayout>

It's working great with horizontal (no rotation) but when I apply the rotation my text is over..

Thanks for help

Answer 1

I have made your socialBloc an inline block so that it's length is limited.

Next, I translate it to the left to make the rightmost corner be where the left one was, and rotate it around the left top center:

.socialBloc {
  display: inline-block;
  font-size: 36px;
  background-color: yellow;
  transform-origin: left top;
  transform: rotate(270deg) translateX(-100%);
}

<div class="socialBloc">
  <a href="#link">Link</a>
  <a href="#link">Link</a>
</div>

Answer 2

Instead of

transform: rotate(270deg);

you can use:

writing-mode: vertical-rl;

The latter is explicitly intended for manipulating the display of text.

---

Working Example:

.socialBloc {
font-size: 36px;
writing-mode: vertical-rl;
}

<div class="socialBloc">
<a href="#link">Link</a>
<a href="#link">Link</a>
</div>