Question

我有固定的背景，并且有一个绝对位置的div;我想将它放在top: 5px and left: 5px，当我没有旋转文本时，它正在工作，但我想让我的文本垂直，所以我旋转了90°。我想从left: 5px and top 5px坚持下去，但是当我应用旋转时，文本会在页面上方切割，甚至左侧部分也会放错位置。

以下是一些 css代码（我使用的是魅力，但它应该与普通的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>

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

感谢您的帮助

Answer 1

我已将您的socialBloc设为内联块，以便其长度有限。

接下来，我将其翻译到左侧，使最右边的角落位于左边的位置，并围绕左上角旋转：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

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

Answer 4

您尚未关闭<a>代码，如果问题不在其中，您似乎需要使用transform-origin。

这是一个帮助我的工作小提琴： https://jsfiddle.net/huLxsv0f/3/

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

具有绝对位置的css旋转

4 个答案: