相对于容器转换原点.旋转的文字

Question

我需要一些帮助,试图了解它是如何transform-origin工作的,我已经完成了我的谷歌搜索,但找不到任何可以帮助我的具体用例的东西.这就是我想要实现的目标:

我有一个固定高度的固定页脚,我有两行旋转文本(左栏),我怎样才能完全控制它的位置？目前它从页脚顶部开始,完全在页脚之外,我设置了一个小提示来显示我当前的代码:http://jsfiddle.net/eury7f6f/

任何人都有任何想法如何实现我想要的？

.vertical-text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

想想把transform-origin钉子撞到挡块上.A transform-origin: right bottom围绕其右下角旋转元素.

2d语法是:transform-origin: x y,where 0 0is left top和100% 100%is right bottom.

至于手头的问题; 而不是旋转实际的文本元素,我将它们包装在另一个元素中,并围绕它的右上角旋转该元素.然后将该元素包装在另一个元素上,并将其元素的100%向后移动到左侧.然后可以像往常一样绝对定位此元素.

如果您愿意,这将允许您保持堆叠元素并将其从内容流中取出.

这看起来像这样:

HTML

<div class="position-me">
  <div class="rotate-me">
    <p>© Copyright Some vertical text.</p>
    <p>Oh my god some really long vertical text...how long?!</p>  
  </div>
</div>

CSS

.position-me {
  transform: translateX(-100%);
}

.rotate-me {
  transform: rotate(-90deg);
  transform-origin: right top;
  text-align: right;
}

这是一支钢笔.