Question

我的功能是为用户提供对角，垂直旋转文本，将文本对齐到底部...我尝试旋转文本，即使我已经定位到右上角。它没有像我预期的那样正确对齐。当我尝试旋转文本时如何解决这个问题。

.outer {
  height: 300px;
  width: 200px;
  background: #fff;
  position: absolute;
  left: 10%;
  top: 10%;
}
.inner {
  position: absolute;
  right: 0;
  transform: rotate(90deg);
  top: 0;
}

<div class="outer">
  <div class="inner">
    sfbkshbghjhsbg
  </div>
</div>

另请参阅fiddle

Answer 1

我不清楚您问题的措辞中您所期望的结果是什么，但似乎很清楚您需要学会使用transform-origin。轮换后，通常还需要translate，请参阅以下示例：

您可能想要这个（https://jsfiddle.net/xtwxxfko/5）：

.outer{
  height:300px;
  width:200px;
  background:#fff;
  position:absolute;
  left:10%;
  top:10%;
}
.inner{
  position:absolute;
  right:0;
  bottom: 0;
  transform: rotate(90deg) translateY(100%);
  transform-origin: bottom right;
}

或许这个（https://jsfiddle.net/ftgzv2v9/1）：

.outer{
  height:300px;
  width:200px;
  background:#fff;
  position:absolute;
  left:10%;
  top:10%;
}
.inner{
  position:absolute;
  right:0;
  top: 0;
  transform: rotate(90deg) translateX(100%);
  transform-origin: top right;
}

这种方法适用于动态内容。

Answer 2

＆＃13;

.outer {
  height: 300px;
  width: 200px;
  background: #fff;
  position: absolute;
  left: 10%;
  top: 10%;
border: 1px solid red;
}
.inner {
  position: absolute;
  right: 0;
  transform: rotate(90deg) translateX(100%);
  top: 0;
transform-origin: 100% 0%;
border: 1px solid blue;
}

＆＃13;

<div class="outer">
  <div class="inner">
sfbkshbghjhsbg
  </div>
</div>

＆＃13;

Answer 3

请参考下面的css代码：

.outer {
    height: 300px;
    width: 200px;
    background: #fff;
    position: relative;
}
.inner {
    position: absolute;
    right: 0;
    transform: rotate(90deg);
    bottom: 0;
    left: 0;
}

Answer 4

如果你想将它对齐到右下角，这里是CSS

.inner {
 bottom: 45px;
 position: absolute;
 right: -45px;
 transform: rotate(90deg);
 }

Answer 5

在底部尝试这个对角垂直的文字，

 .inner{
  position:absolute;
  right:-40px;
  transform:rotate(90deg);
  bottom:42px;
}

Answer 6

如果您在旋转时不需要转换，您可以看一下在成为IE5 +功能之前几乎无处不在的写入模式......

我使用top 和 bottom在其父级的整个高度上调整容器大小。

Transform仅用于反转文本的布局，这对我来说更具可读性，只是我的意见:)）

.outer {
  height: 300px;
  width: 200px;
  background: #fff;
  position: absolute;
  left: 10%;
  top: 10%;
}
.inner {
  position: absolute;
  right: 0; 
  top: 0;
  bottom:0;
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-rl;
  writing-mode: tb-lr;
  /* writing-mode:sideways-lr;could be the one */ 
  
  /* eventually untill sideways-lr is working everywhere */
  transform: scale(-1, -1);
}
body {
  background:gray;
  }

<div class="outer">
  <div class="inner">
    rotate me downwards
  </div>
</div>

定位不适用于变换

6 个答案: