具有绝对位置的css旋转答案

【问题标题】：css rotation with absolute position具有绝对位置的css旋转
【发布时间】：2017-07-22 13:02:07
【问题描述】：

我有一个固定的背景和一个绝对位置的 div；我想把它放在top: 5px and left: 5px，当我没有旋转文本时它可以工作，但我想让我的文本垂直，所以我旋转了 90°。我想从left: 5px and top 5px 粘贴它，但是当我应用旋转时，文本在页面上方被剪切，甚至左侧部分也放错了位置..

这是一些 css 代码（我使用的是 glamor，但它应该与普通 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)',
})

还有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>

水平（无旋转）效果很好，但是当我应用旋转时，我的文本结束了..

感谢您的帮助

【问题讨论】：

请发布呈现的 HTML 和 CSS，以便我们有一个 minimal reproducible example

标签： javascript html css css-position

【解决方案1】：

我已将您的 socialBloc 设为内联块，因此它的长度是有限的。

接下来，我将它向左平移，使最右边的角成为左边的位置，然后围绕左上角中心旋转：

.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>

【讨论】：

这很好用，我想是因为我没有添加 translateX，我尝试了 transform-origin 但没有先工作 ;) 非常感谢！ :)
很高兴它有帮助！

【解决方案2】：

代替

transform: rotate(270deg);

你可以使用：

writing-mode: vertical-rl;

后者明确用于操纵文本的显示。

工作示例：

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

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

【讨论】：

看来这种方式比我的好很多！会记得的。

【解决方案3】：

如果没有视觉示例，我只能猜测您的问题，但可能是using transform-origin would help。这将允许您在除中心以外的元素上定义一个点，以使transform 生效。

【讨论】：

【解决方案4】：

您还没有关闭您的<a> 标签，如果问题不在于它，您似乎需要使用transform-origin。

这是一个有用的小提琴： https://jsfiddle.net/huLxsv0f/3/

我知道这不是完美的解决方案。但我不确定你会找到更好的...

【讨论】：