html - 旋转元素并放置在父元素的 Angular 落

Question

我试图将一个元素定位在其父元素的右下角。目前，您可以看到它位于中心，但触及底部:

http://jsfiddle.net/03r7gabp/

理想情况下，我希望它触及底部，一直向右冲洗(right: 0; 通常会这样做)。

这是想要的效果:

这可能吗？我已经在使用:

 transform-origin: bottom left;

Answer 1

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

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

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

关键点是 translate() 符号上的百分比值是相对于边界框的大小的。 IE。在这种情况下，绝对定位元素的边框大小。

这是一个演示:

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