css - 相对于容器转换原点。旋转文字

Question

我需要一些帮助来了解 transform-origin 的工作原理，我已经完成了谷歌搜索，但找不到任何可以帮助我的特定用例的东西。这是我想要实现的目标:

我有一个固定高度的固定页脚，其中有两行旋转文本(左栏)，我如何才能完全控制它的位置？目前它从页脚的顶部开始并且完全在页脚之外，我已经设置了一个 fiddle 来显示我当前的代码: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 设置为将钉子猛击到 block 中。 transform-origin: right bottom 围绕其右下角旋转元素。

二维语法是:transform-origin: x y，其中0 0是left top和100% 100% 是右下角。

至于手头的问题；我不是旋转实际的文本元素，而是将它们包裹在另一个元素中，然后围绕其右上角旋转该元素。然后将该元素包裹在另一个 元素上，并将该元素向左移动其宽度的 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;
}

Here's a pen .