css - 带有 CSS 的横向文本块

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 ，但这只是选择了一个不同的旋转点。我真正想要的是让该跨度横向旋转，然后在线滑回原位。

标签： css

Answer 1

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

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

<div>
  <img src="https://i.stack.imgur.com/8GbPO.png">

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