絕對位置旋轉元素右轉角

Question

我試圖弄清楚如何使購物車選項卡，將位於右側角落，也旋轉90度。旋轉自然混合的位置，但也許有包裝不同包裝等的解決辦法....

額外的點，如果有就不需要定義寬度。我不在乎舊版瀏覽器

Answer 1

如何使用transform-origin？見DEMO。

相關CSS：

#box { 
    position: relative; 
} 
.bg { 
    right: 40px; /* same as height */ 
    height: 40px; 
    transform: rotate(-90deg); 
    transform-origin: 100% 0; 
    position: absolute; 
    line-height: 40px; /* same as height, for vertical centering */ 
} 

Answer 2

Ana's answer非常好，我指出了正確的方向，但我意識到，你可以達到同樣的效果，而無需顯式設置高度，行高度和位置的元素要移動 - 相反，剛剛成立translate(0, -100%)：

body { 
 
    margin: 0; 
 
} 
 

 
#box { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
\t right: 0; 
 
\t padding: 1em; 
 
\t transform: rotate(-90deg) translate(0, -100%); 
 
\t transform-origin: 100% 0; 
 
\t position: absolute; 
 
\t background: #FF1493; 
 
}

<div id="box"> 
 
\t <div class="bg">   
 
\t \t <div class="txt">He's not the Messiah. He's a very naughty boy.</div> 
 
\t </div> 
 
</div>

...和一個jsFiddle爲好措施。