这应该是一个非常简单的问题,你会想.我有一个带有一些标题文本的框,我想旋转-90度.我希望它是绝对的定位,以便这个词的结尾被轻推到左上角.我可以很容易地将它与底部对齐,但是问题是,使用可变长度的文本,似乎不可能让它始终保持在容器内,因为像{top：0}之类的操作在顶部转型.为了我的目的,这只需要在Firefox中工作.我可以使用
javascript,如果这是唯一的解决方案,但你会认为这可以用CSS完成.
解决方法
您应该使用
transform-origin来调整转换点,以及定位属性的一些创造性使用.
http://jsfiddle.net/thirtydot/JxEfs/1/
CSS：
#Box { padding: 30px; position: relative; border: 1px solid blue; } #Box > div { border: 1px solid red; position: absolute; top: 0; right: 100%; white-space: nowrap; -webkit-transform: rotate(270deg); -webkit-transform-origin: right top; -moz-transform: rotate(270deg); -moz-transform-origin: right top; -ms-transform: rotate(270deg); -ms-transform-origin: right top; -o-transform: rotate(270deg); -o-transform-origin: right top; transform: rotate(270deg); transform-origin: right top; }
HTML：
<div id="Box"> hello <div>rotated!</div> </div>
