相对于容器变换原点。旋转文本

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 设置为将钉子钉入方块。 transform-origin: right bottom 将元素围绕其右下角旋转。

二维语法是：transform-origin: x y，其中0 0 是left top，100% 100% 是right bottom。

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

Answer 2

你的问题是没有转换原点可以给你你想要的。

如果你的变换原点在 div 的左边，如果可以让它们向下，你可以让它们对齐。 （旋转 90 度而不是 -90 度）。

而且如果你把transform-origin设置在div的右边，由于右端没有对齐，就会变得一团糟。

最好的办法是为旋转添加平移：

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

        -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);
    }

fiddle