css - 带有 CSS 的横向文本 block

Question

我正在尝试让一段文本在网页中横向显示。这是我的起点、一张图片和一些链接:

它的 HTML 看起来像这样:

<div>
  <img src="med.png">

  <span class="links">
    <a href="full.png">[full]</a>
    <a href="tn.png">[tn]</a>
  </span>
</div>

我想要的是这样显示:

我试过 CSS 旋转:

.links {
  display: inline-block;
  transform: rotate(90deg);
}

但我明白了:

好的，我明白了，它是围绕中心点旋转的。我玩过 transform-origin 但它只是选择了一个不同的旋转点。我真正想要的是让该跨度横向旋转，然后以内联方式滑回原位。

Answer 1

您可以使用 transform-origin: bottom left; 在左下角旋转它，并使用 translateX(-100%); 将它向上移动

.links {
  display: inline-block;
  transform: rotate(90deg) translateX(-100%);
  transform-origin: bottom left;
}

<div>
  <img src="/image/8GbPO.png">

  <span class="links">
    <a href="full.png">[full]</a>
    <a href="tn.png">[tn]</a>
  </span>
</div>