这应该是一个非常简单的问题,你会想.我有一个带有一些标题文本的框,我想旋转-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>
