css - 如何使 flexbox 中的旋转元素固定在页面的右侧？

Question

我想创建一个小的垂直文本“水印”背景，它在一些 reveal.js 幻灯片的右侧运行。我已经知道我需要使用 transform 来旋转任何我想要垂直运行的元素到页面右侧的长度。

问题是很多几何计算似乎发生在 转换发生之前，结果是当我尝试将元素与 flexbox 对齐时几何计算错误。这是一个几乎有效的基本示例:

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
}

.item {
    transform: rotate(-90deg);
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>

问题在于外部 div 的宽度是根据非旋转 flexbox 元素的宽度计算的，因此元素显示出偏离页面。

如果我尝试通过将 align-items 更改为 flex-end 来解决此问题，结果是每个元素都对齐到不同的

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: flex-end;
}

.item {
    transform: rotate(-90deg);
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>

我猜这是因为根据元素的旋转前版本计算了放置基线的位置，然后它们旋转到您在那里看到的位置。

做这样的事情的正确方法是什么？有什么方法可以创建一个元素，在旋转发生后计算关于其位置的几何计算？

Answer 1

调整transform-origin，在不改变对齐方式的情况下依赖平移

这是在左边:

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
}

.item {
    transform: rotate(-90deg) translate(-100%);
    transform-origin:top left;
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>

右边是:

div.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: grey;

    display: flex;
    flex-flow: column nowrap;
}

.item {
    transform: rotate(-90deg) translateY(-100%);
    transform-origin:top right;
    background: red;
}

<div class="outer">
<div class="item" style="width: 200px">
    Some text
</div>
<img class="item" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4gYGDxYxe2lIhQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAGiSURBVFjD7ZmxzYMwEIVfonQMkA1SUNAiUYBEmYKMkDEyg8fICEeRnhRIMEAkmMDpSUWkS4WU5geMjfiD/EnuzNPZjzvZ5w0zMyz/hp3dAn1erxcejweyLEOapgCAJEkQRRFc14XjOKO1NroZUtc1iqJAnue43+8AgDAMEQQBfN/H4XBYrRHv9xu32w2n06l3HhHheDxitxvx//NEpJQshGAAvUMIwVJKXhtN03Acx4Pr70Ycx9w0zaDuJEOqqmLP80YH43keV1W1GjPatlUy49uUtm3NGiKlVDLj25S1ZAoRKa+/G0Rk1pAxZaqvfK2hVE1dfzf6ShdUS5VuML9eusqy1N6Dsiz/1N+qnCqKotA+mZjQWJIsy2bVUDIkz3PtYExoLEl3z5hLQ8mQ7p6hgwmNNbO1W6BGkiSzaigZEoahdjAmNJYkiqJZNZQMCYJAOxgTGkviuu6sGkqG+L6vHYwJjSVxHAdENPl7IupvNtqLoW2d2OaibS7Olylj+lpENJgZHZPfQ57PJ67XKy6XS+88IQTO5zP2+719oLIPVL/HBwWcbe23UyTxAAAAAElFTkSuQmCC" alt="" />
</div>