问在div右侧的CSS转换中控制旋转的起源
EN

Stack Overflow用户

提问于 2017-04-21 11:14:38

回答 1查看 62关注 0票数 0

如果我将此规则应用于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 13:09:50

答案是，正如你所知道的那样，非常简单。感谢Sahil让我在Codepen中模拟这个问题，比在一个充满数据的实时页面上更容易看到问题。

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

在变换中加入translateX(100%);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43541313

复制

相似问题

问在div右侧的CSS转换中控制旋转的起源EN