将旋转-90度的元素对齐到容器的左侧答案

【问题标题】：Align to left side of contaner a element rotated -90deg将旋转-90度的元素对齐到容器的左侧
【发布时间】：2015-09-16 07:40:19
【问题描述】：

div {
  width: 300px;
  height: 300px;
  border:1px solid black;
}
h1 {
  width: 300px;
  transform: rotate(-90deg)
}

<div>
  <h1>Hola</h1>
</div>

如果你尝试这个 sn-p，你会看到 h1 被旋转并放置在 div 的中心（有意义，它们具有相同的宽度）

但是如何将它左对齐呢？ (灵活的容器宽度)

【问题讨论】：

是的，当h1 旋转时，其initial_width 变为final_height 并且initial_height 变为final_width
当您将width 的h1 变为height 时，h1 将向左移动
经过测试，有效，但它必须是另一种方式，对吗？我需要它有合理的背景..
@ToniMichelCaubet：是的，有办法，但应该是左上、左下还是左中？

标签： css rotation transform css-transforms

【解决方案1】：

您可以相对于父div 绝对定位h1 元素，然后使用transform-origin 属性指定应围绕其旋转的轴。

在下面的 sn-p 中，元素位于父元素的底部，并且由于原点设置在左下角，因此元素的左下角 (h1) 在旋转期间保持在其位置。

现在由于旋转，旋转后元素会离开父元素。要将其恢复原位，请将translateY(100%) 添加到转换堆栈。添加text-align: right 以将内容设置在左上角。 text-align 使它看起来比实际更骇人听闻，但除此之外很难定位到 left-top。

div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
h1 {
  position: absolute;
  display: inline-block;
  bottom: 0px;
  width: 300px;
  text-align: right;
  transform: rotate(-90deg) translateY(100%);
  border: 1px solid;
  transform-origin: left bottom;
}
div, h1 {
  margin: 0px;
  padding: 0px;
}

<div>
  <h1>Hola</h1>
</div>

未来访问者请注意：与使用静态值进行定位不同，此使用translateY() 的解决方案将能够自动调整自身，即使内容的长度增加或跨越多行，如低于sn-p。同样，唯一的缺点是文本会右对齐。

div {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
h1 {
  position: absolute;
  display: inline-block;
  bottom: 0px;
  width: 250px;
  text-align: right;
  transform: rotate(-90deg) translateY(100%);
  border: 1px solid;
  transform-origin: left bottom;
}
div,
h1 {
  margin: 0px;
  padding: 0px;
}

<div>
  <h1>Halooo</h1>
</div>
<div>
  <h1>Some lengthy content which wraps around</h1>
</div>

【讨论】：

文本超出了div
@Amitsingh：感谢您指出这一点。那是因为我没有在父级上设置position: relative。因此，它正在相对于根进行定位。

【解决方案2】：

检查一下，它将为您所需的解决方案指明方向..

 div {
   width: 300px;
   height: 300px;
   border: 1px solid black;
 }
 h1 {
   width: 70px;
   margin-left: -20px;
   float: left;
   transform: rotate(-90deg)
 }

<div>
  <h1>Hola</h1>
</div>

更新

或者你也可以这样做

 div {
   width: 300px;
   height: 300px;
   border: 1px solid black;
 }
 h1 {
   position: absolute;
   left: -10px;
   top: 2px;
   transform: rotate(-90deg)
 }

<div>
  <h1>Hola</h1>
</div>

【讨论】：