控制旋转的CSS起源于div的右手边变换

Question

如果我将此规则应用于一个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一起移动，但这些值对于不同大小的内容而言是不同的。

Answer 1

答案是，就像你知道的那样，很简单。感谢Sahil让我在Codepen中进行模拟，比在一个充满数据的实时页面上更容易看到问题。

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

即添加到translateX(100%);变换