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

我需要一些帮助来理解

transform origin

是如何工作的，我已经在谷歌上搜索过了，但找不到任何有助于我的特定用例的东西。以下是我努力实现的目标：

我有一个固定的页脚和一个固定的高度，其中我有两行旋转的文本（左手列），我如何才能完全控制它的位置？现在它从页脚顶部开始，完全在页脚之外，我设置了一个小提琴来显示我当前的代码：

有人知道如何实现我想要的吗

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

---

将设置

变换原点

视为将钉子猛击到块中。变换原点：右下角

围绕其右下角旋转元素

2d语法为：
变换原点：xy
，其中
0 0
为
左上
，
100%100%
为
右下

至于手头的问题,；我不会旋转实际的文本元素，而是将它们包装在另一个元素中，并围绕其右上角旋转该元素。然后将该元素包裹在另一个元素上，并将其移动到元素100%的宽度，使其返回左侧。然后，可以像平常一样完全定位此元素

这将允许您继续堆叠元素，并根据需要将其从内容流中移除

这看起来像这样：

HTML
.
您的问题是，没有任何变换原点可以满足您的需求

如果变换原点位于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);
    }

完美。比我的解决方案好得多。谢谢你的解释，这个类比真的很有帮助。干杯！这个解决方案确实对我有效，但是被接受的答案更适合我的用例。谢谢很高兴它有帮助！
.position-me {
  transform: translateX(-100%);
}

.rotate-me {
  transform: rotate(-90deg);
  transform-origin: right top;
  text-align: right;
}

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