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

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

2d 语法是：transform-origin: x y，其中 0 0 是 left top，100% 100% 是 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;
}

Here's a pen.

Answer 2

你的问题是没有 transform-origin 可以给你你想要的东西。

如果你的变换原点在 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

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

Transform origin relative to container. Rotated text

css

transform

css-transforms

HTML

CSS