CSS旋轉和頁面左下角的位置

Question

我想在窗口的左下角放置一個div，所以它總是卡在那裏。但它應該包含從底部向上讀取的文本，如圖片所示。 pic 1

我已經試過這樣的造型：

-ms-transform: rotate(270deg); /* IE 9 */ 
    -webkit-transform: rotate(270deg); /* Safari */ 
    transform: rotate(270deg); 
    position:fixed; 
    left:0; 
    bottom:0; 

但股利是這樣的位置：

pic 2

Answer 1

這裏的祕訣是把包含文本，而不是元素文本本身.. 但使用transform-origin來設置元素轉換的適當點。

首先我們將元素放置在屏幕的左下角。

然後我們設置從左上方點改造元素...後旋轉90度但我們也必須把它轉換回它自己的高度（混亂100％，但是那是因爲旋轉）。

因爲元素是position:fixed它將收縮包裝成內容的大小。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.wrap { 
 
    background: rebeccapurple; 
 
    color: white; 
 
    border: 1px solid grey; 
 
    padding: .25em; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform-origin: top left; 
 
    transform: translateY(100%) rotate(-90deg); 
 
}

<div class="wrap"> 
 
    <p>Lorem ipsum dolor sit amet.</p> 
 
</div>

JSfiddle Demo（用較長的文字）