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

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

- egr103

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

这里是一个笔。

- Nils Kaspersson

---

太完美了，比我的解决方案好多了。谢谢你的解释，类比真的很有帮助。干杯！ - egr103

Answer 2

您的问题在于没有适当的 transform-origin 可以实现您想要的效果。

如果您的 transform-origin 在 div 的左侧，您可以将它们对齐，但需要向下旋转90度而不是-90度。

如果您将 transform-origin 设置为 div 的右侧，则由于右侧未对齐，所以会变得混乱。

最好的解决方案是在旋转中添加一个 translate。

.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

- vals

---

这个解决方案对我有用，但是被采纳的答案更适合我的使用情况。谢谢！ - egr103

很高兴能够帮到您！ - vals