Question

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

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

如果您尝试使用此代码段，您会看到h1已旋转并放置在div的中心（有意义，它们具有相同的宽度）

但是如何将它对齐到左边？（柔性容器的宽度）

Answer 1

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

在下面的片段中，元素位于父元素的底部，因为原点设置在左下角，元素的左下角（h1）在旋转期间保持在其位置。

现在由于旋转，元素将在旋转后移出父级。要将其恢复到位，请将translateY(100%)添加到转换堆栈。添加text-align: right以在左上角设置内容。 text-align使它看起来比实际上更加晦涩，但在left-top处很难定位。

＆＃13;

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

＆＃13;

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

＆＃13;

对未来访问者的注意事项：与使用静态值进行定位不同，使用translateY()的此解决方案即使内容的长度增加或跨越多行，也可以自动调整自身在下面的片段中。同样，唯一的缺点是文本会正确对齐。

＆＃13;

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

＆＃13;

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

＆＃13;

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

将容器左侧与-90度旋转的元件对齐

2 个答案: