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

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围绕其右下角旋转元素。

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

你的问题是没有变换源可以给你你想要的东西。

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