旋转元素并放置在父级的角落

Question

我正在尝试将元素放在它父母的右下角。此刻，您可以看到它位于中心，但触及底部：

http://jsfiddle.net/03r7gabp/

理想情况下，我希望它触及底部，一直向右冲（right: 0;通常会做什么）。

这是理想的效果：

这可能吗？我已经在使用了：

 transform-origin: bottom left;

Answer 1

好的，所以我就是这样做的！

<强> http://jsfiddle.net/03r7gabp/2/

CSS

.info {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: lime;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    margin-left: 100%;
    width: 200px; /* height of container */
}

我唯一不满意的是width必须是一个固定值（等于容器的高度）。

击穿

第1步

在这里看不多，继续前进！

第2步

请注意，我们已将旋转原点指定为左下角。想象一下，你将一根针钉在<div>的那个角落，然后你就这一点旋转它。

第3步

在上一张图片中，我们<div>坐在容器的外面上。我们现在可以调整其边距，使其显示在另一边。请记住，指定的百分比是父元素宽度的度量

第4步

现在我们将项目“碰撞”到容器的底部。

第5步

最后，我们必须给我们的div宽度等于父容器的高度

---

另一种解决方案是将容器设置为overflow: hidden;，然后将子元素的宽度设置为任意大。显然，如果句子的长度超过容器的高度，则会剪切单词（例如http://jsfiddle.net/03r7gabp/6/）

Answer 2

有几种解决方案可以实现这一目标，但我发现这个更灵活。

由于您可以组合多个转换符号，因此最终会得到：

.info {
    position: absolute;
    bottom: 0; right: 0;
    transform: rotate(-90deg) translateX(100%);
    transform-origin: 100% 100%;
}

关键是translate()表示法的百分比值与边界框的大小有关。即在这种情况下，绝对定位元素的边框的大小。

这是一个演示：

.container {
    width: 300px;
    height: 200px;
    border: 1px solid red;   
    position: relative;
}

.info {
    position: absolute;
    bottom: 0; right: 0;
    background-color: gold;

    -webkit-transform: rotate(-90deg) translateX(100%);
       -moz-transform: rotate(-90deg) translateX(100%);
         -o-transform: rotate(-90deg) translateX(100%);
        -ms-transform: rotate(-90deg) translateX(100%);
            transform: rotate(-90deg) translateX(100%);
    
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}

<div class="container">
    <div class="info">
        hello this is a sentence
    </div>
</div>

Answer 3

一种解决方案是将transform-origin: bottom left;更改为正确，并从bottom: 0更改为top: 35px

＆＃13;

＆＃13;

.container {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.info {
  position: absolute;
  top: 35px;
  right: 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: bottom right;
}

＆＃13;

<div class="container">
  <div class="info">
    hello this is a sentence
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;