CSS旋转

Question

我在CSS中遇到垂直对齐问题。我想从下到上显示内容。

我的主要目标是：

• 内容宽度基于父级;
• 内容与父级的底部对齐;
• 内容逆时针旋转;

我已经看到了这个链接：Vertical Alignment和其他的SO。不幸的是，我无法找到答案。

我制作了一个示例小提琴，说明了我的问题：vertical alignment fiddle。我的结果是：

• 元素宽度基于父宽度;
• 内容轮换时存在间隙;

＆＃13;

＆＃13;

.container {
  position: absolute;
  width: 100%;
  height: 92%;
}
.side-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 0, 1.0);
  width: 20%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 255, 1.0);
  width: 80%;
  height: 100%;
  box-sizing: border-box;
}
.text-content {
  border: 2px solid rgba(255, 0, 0, 1.0);
  bottom: 0;
  width: 100%;
  position: absolute;
  float: left;
  font-size: 10px;
  color: rgba(255, 102, 0, 1.0);
  transform-origin: left top 0;
  transform: rotate(-90deg);
}

＆＃13;

<section class="container">
  <div class="side-content">
    <span class="text-content">Vertical Alignment</span>
  </div>
  <div class="main-content">
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试此操作，调整transform-origin值，并将translateY(100%)与rotate(-90deg)一起添加。

.text-content {
  ...
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}

.container {
  position: absolute;
  width: 100%;
  height: 92%;
}
.side-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 0, 1.0);
  width: 20%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 255, 1.0);
  width: 80%;
  height: 100%;
  box-sizing: border-box;
}
.text-content {
  border: 2px solid rgba(255, 0, 0, 1.0);
  bottom: 0;
  width: 100%;
  position: absolute;
  float: left;
  font-size: 10px;
  color: rgba(255, 102, 0, 1.0);
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}

<section class="container">
  <div class="side-content">
    <span class="text-content">Vertical Alignment</span>
  </div>
  <div class="main-content">
  </div>
</section>

Answer 2

尝试将width更改为auto，将position更改为fixed。

.text-content {
    ...
  width: auto;
  position:fixed;
    ...
}