代码之家 › 专栏 › 技术社区 › egr103

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

css-transforms transform css

egr103 · 技术社区 · 11 年前

我需要一些帮助来理解 transform-origin 我已经完成了我的谷歌搜索,但找不到任何可以帮助我特定用例的东西。以下是我试图实现的目标: Here's how it should look

我有一个固定高度的固定页脚,其中有两行旋转文本(左侧列),我如何完全控制其位置?现在它从页脚顶部开始,完全在页脚之外,我设置了一个小提琴来显示我的当前代码: 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);
}

2 回复 | 直到 11 年前

Community Mohan Dere 6 年前

想想设置 transform-origin 就像把一颗钉子钉进街区一样。A. 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 .

vals 11 年前

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

如果您的变换原点位于div的左侧,那么可以将它们对齐向下 .(旋转90度而不是-90度)。

如果将变换原点设置在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