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

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

• javascript
• html
• css
• css-position

• Post the rendered HTML and CSS please so that we have an minimal reproducible example – Michael Coker Commented Mar 2, 2017 at 17:10

4 Answers 4

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>

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>

Without a visual example to go by I can only guess your issue, but perhaps using transform-origin would help. This will allow you to define a point on the element other than the centre for the transform to take effect.

You have not close your <a> tags and if problem is not with it, seems like you need to work with transform-origin.

Here is a working fiddle to help a bit: https://jsfiddle/huLxsv0f/3/

I know it's not perfect solution. But I'm not sure you'll find better one...