控制旋轉的CSS起源於div的右手邊變換

如果我將此規則應用於一個div（可變內容）控制旋轉的CSS起源於div的右手邊變換

position: absolute; 
left: 0; 
top: 0; 
transform: rotate(90deg) translateY(-100%); 
transform-origin: 0 0 0;

它從它的左上角和「掛起旋轉'在其父母的左上角。它不會移動，無論div的大小如何可以在右手邊做同樣的事情，即旋轉它，使其「懸掛」在其父母的右上角並從左上角旋轉。

的出發點是

position: absolute; 
right: 0; 
top: 0; 
transform: rotate(90deg); 
transform-origin: 100% 0 ;

但它豎起來「，而不是「下垂」。

我當然可以將其與right和top一起移動，但這些值對於不同大小的內容而言是不同的。

2017-04-21 Chris Pink

可以爲您提供的，請您嘗試了什麼工作代碼..這將有助於更好地理解 –

https://codepen.io/chrispink/pen/qmZvKp你會看到一個額外的文本位置，我希望它的位置，但'頂部'的價值取決於文本的大小 –

答案是，就像你知道的那樣，很簡單。感謝Sahil讓我在Codepen中進行模擬，比在一個充滿數據的實時頁面上更容易看到問題。

position: absolute; 
right: 0; 
top: 0; 
transform: rotate(90deg) translateX(100%); 
transform-origin: 100% 0 ;

即添加到translateX(100%);變換

2017-04-21 13:09:50

哇，這很酷..你幫助你自己\ m/ –

那麼，希望它有一天會幫助別人。 –

回答