旋转文本并在CSS中对齐它？

Question

旋转然后将文本与某些内容对齐的首选解决方案是什么？

实施例： http://jsfiddle.net/nVtpz/

<style>
.wrapper {
    width: 100px;
    height: 100px;
    border: 1px solid #009;
    margin: 50px;
}
.text
{
    border: 1px solid #900;
      -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
          transform: rotate(-90deg);

}
.image {
    border: 1px solid #090;
}
</style>

<div class="wrapper">    
    <div class="text">
        Text to rotate
    </div>
    <div class="image">
        <img src="http://lorempixel.com/100/100"/>
    </div>
</div>

我希望文本在图像的左下角旁边对齐（但不能在图像的顶部对齐，即没有浮动）

我想我可以使用position: relative; bottom: 0px或类似的东西，但有更好的方法吗？

Answer 1

I think that this is what you are going for，但您可以使用transform-origin更改转换源（根据需要使用相关的供应商前缀）。这是情境性的，但在你的情况下：

transform: rotate(90deg) translateX(100%);
transform-origin: 100% 100%;

Answer 2

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
}
.text{
  position: absolute;
  width: 100%;
  background:rgba(0,0,0,0.5);
  color:#fff;
  -webkit-transform: rotate(270deg) translateX(-100%);
          transform: rotate(270deg) translateX(-100%);
  -webkit-transform-origin: 0px 0px;
          transform-origin: 0px 0px;
}
.image img{
  vertical-align:middle;
}

<div class="wrapper">    
  <div class="text">
    Text to rotate
  </div>
  <div class="image">
    <img src="http://lorempixel.com/100/100"/>
  </div>
</div>

Answer 3

要简单地旋转文本：

.container {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

然后将其设置在CSS网格中，以便如果您希望其滚动移动，可以使用sticky跟踪视口。