带有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);
}

但是我明白了：

好的，我知道这是围绕中心点旋转的。我玩过转换原点，但是只是选择了一个不同的旋转点。我真正想要的是使该跨度向侧面旋转，然后将其滑回到内嵌位置。

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>

Answer 2

您还可以调整writing-mode

.links {
  display: inline-block;
  writing-mode:vertical-rl;
}

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

Answer 3

因此，我可以使用绝对定位并稍微更改您的标记来工作

CSS

.blue {
  display: inline-block;
  width: 400px;
  height: 400px;
  background-color: blue;
}

.outer-div {
  position: relative;
  display: inline-block;
}

.links {
  width: 100%;
  margin: 0;
  text-align: right;
  z-index: 20;
  position: absolute;
  bottom: 0;
  right: -7px;
  transform: rotate(90deg);
  transform-origin: 100% 75%;
}

HTML

<div class="outer-div">
  <div class="blue"></div>

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