css - 在 div 右侧的 CSS 变换中控制旋转原点

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%); 到转换